Using two-lists with vuex causes TypeError.

[AnoRebel]

I use the latest Vue 3(3.0.11) and Vuex 4(4.0.0). Sorry, couldnt create a quick one. But below is the basic of the component and some of its scripts.

The Component:

<div>
      <draggable
            v-model="tempList"
            :component-data="{ name: 'flip-list', type: 'transition' }"
            tag="transition-group"
            group="tasks"
            item-key="id"
          >
            <template #item="{ element }">
              <div
                key="item"
                class="list-group-item min-h-[7rem] max-w-[16rem] rounded text-white text-center bg-black my-3"
                :class="{ 'not-draggable': enabled }"
              >
                {{ element.name }}
              </div>
            </template>
      </draggable>
</div>

The Templist value:

<script>
    const list = () => {
      if (props.list == "working") {
        return store.state.working;
      } else if (props.list == "progress") {
        return store.state.inProgress;
      } else if (props.list == "review") {
        return store.state.inReview;
      } else if (props.list == "done") {
        return store.state.done;
      } else {
        return [];
      }
    };
    const tempList = computed({
      get: () => list(),
      // set: value => store.dispatch("updateTasks", value),
      set: value => {
        // let payload = { value, type: props.list };
        // store.dispatch("updateTasks", payload);
        store.dispatch("updateTasks", value);
      },
    });
</script>

The Store:

state: {
    working: [
      { name: "A", id: 1 },
      { name: "B", id: 2 },
      { name: "C", id: 3 },
      { name: "D", id: 4 },
    ],
    inProgress: [
      { name: "E", id: 5 },
      { name: "F", id: 6 },
      { name: "G", id: 7 },
      { name: "H", id: 8 },
    ],
    inReview: [
      { name: "I", id: 9 },
      { name: "J", id: 10 },
      { name: "K", id: 11 },
    ],
    done: [
      { name: "L", id: 12 },
      { name: "M", id: 13 },
      { name: "N", id: 14 },
    ],
  },

Step by step scenario

Create an app, create a store. Add my different lists to the store. Call the lists in a custom draggable component i made(which is basically just a draggable that i can reuse with same values except the passed list from store)

Actual Solution

Dragging within the same list element/draggable (i.e sorting) works. But dragging to the other list(with the same group name) breaks the whole component(becomes unresponsive). The console logs out the error:

Uncaught TypeError: Cannot read property '3' of undefined at insertNodeAt (htmlHelper.js:11) at Proxy.onDragRemove (vuedraggable.js:251) at Proxy. (vuedraggable.js:20) at Sortable. (vuedraggable.js:28) at dispatchEvent (sortable.esm.js:916) at _dispatchEvent (sortable.esm.js:961) at Sortable._onDrop (sortable.esm.js:2187) at Sortable.handleEvent (sortable.esm.js:2269)

Expected Solution

To be able to move from one list to the other without a problem

Any help will be quite useful for I'm to both vue and vuex.

[Charlesbjerg]

I've got a near identical setup to this with the exact same issue.

VueX store that's version 4.0 and VueJS that is V3.

Both draggable components are using the same name, the item keys are correct and the VueX get/set methods are correct.

https://user-images.githubusercontent.com/17528695/114955721-3398e900-9e55-11eb-99e2-9ffb041a9f0f.mp4

Seems to be coming from the fatherNode not having the children property set/populated.

[roonie007]

+1

[MariusSpring]

Getting the exact same error. This is frustrating! Anyone have a quick fix for this? Is there a version of vue-draggable for Vue 3 that does not have this issue?

EDIT: The issue seems to be with the transition tag. Remove that and it works again.

[roonie007]

@MariusTechweb I got the same problem yesterday, and i just change to this package "vue-draggable-next" and it works without any trouble, you will only remove the <template> tag ( you need to remove it).

[MariusSpring]

@roonie007 Thank you. Anyways, after hours of debugging I got it working. The issue was apparently there's a bug with using tag="transition-group" on draggables you wish to drag between.

[Charlesbjerg]

Removing the transition group tag worked for me too, just means this is running without any transitions. Snippets below if anyone needs an example.

Original Code:

<draggable v-model="column.cards" group="board" item-key="id" tag="transition-group" :component-data="{name:'fade'}">
    <template #item="{element}">
        <board-card :card="element"/>
    </template>
</draggable>

Fixed Code:

<draggable v-model="column.cards" group="board" item-key="id">
    <template #item="{element}">
        <board-card :card="element"/>
    </template>
</draggable>

[MariusSpring]

@Charlesbjerg I figured you can get the flip animation if you set the prop :animation="500" on the draggable component. Apparently sortable comes with this animation if set. 500 = animation duration in milliseconds.

[alnumac]

Submitted pull request #52 to resolve this.

[rendomnet]

same problem

[cybersturmer]

same problem