Modifying the list doesn't re-render

[archseer]

I have a list like this:

    <vddl-list
      :list="a"
      :allowed-types="['a']"
      :horizontal="false">

      <vddl-draggable v-for="(item, index) in a" :key="index"
        :draggable="item"
        :index="index"
        :wrapper="a"
        type="mytype"
        effect-allowed="move">
        <div>asdasd</div>
      </vddl-draggable>

      <vddl-placeholder>
        <div class="placeholder"></div>
      </vddl-placeholder>
    </vddl-list>

a = [1]

If I modify the array a.push(2), the list doesn't update. I can see the Vue dashboard to properly update and add the components

but the actual view stays the same. I think this is because we're modifying the DOM and adding the placeholder component, and vue.js loses track of the elements

[archseer]

Weird, wrapping the v-for in a div works:

   <vddl-list
      :list="a"
      :allowed-types="['a']"
      :horizontal="false">

<div>
      <vddl-draggable v-for="(item, index) in a" :key="index"
        :draggable="item"
        :index="index"
        :wrapper="a"
        type="mytype"
        effect-allowed="move">
        <div>asdasd</div>
      </vddl-draggable>
</div>

      <vddl-placeholder>
        <div class="placeholder"></div>
      </vddl-placeholder>
    </vddl-list>

[hejianxian]

@archSeer I am sorry for late reply.

Has your problem been solved? I tried your description and it is OK.

[archseer]

@hejianxian It wasn't working correctly. Vuejs would lose track of the elements since the placeholder inserting would mess with the DOM. What I did is rewrote the vddl-list component to stop changing the DOM and just store an index, then use a render function. I can provide a PR; might help with #3

[archseer]

This is what I have so far: https://gist.github.com/archSeer/8529c45c5b76e564c53eb4f48524f623

[pschaub]

@archSeer Please provide a PR. This DOM-manipulation really destroys the functionality of vddl - this needs to be done in the correct way as you described.

[ChadTaljaardt]

Wrapping it in a div worked for me as well. But this really should be fixed as part of the package.

[ahallez]

I have this problem after updating to the latest version of the package. Removing the placeholder tag, solves the rerendering problem, but that of course causes new problems.