error with item-key: componentStructure.js:3 Uncaught TypeError: Cannot set properties of null (setting '__draggable_context')

[timothymarois]

Adding item-key="id" doesnt work, it throws this error:

componentStructure.js:3 Uncaught TypeError: Cannot set properties of null (setting '__draggable_context')

When you omit the item key it throws a warning that you need to include the item key prop. So its a catch-22. The items in my case have id property, but using that here, like in the examples on this repo, it doesn't work.

As an example to what I'm using:

<draggable 
                        v-model="myArray" 
                        class="flex justify-start align-middle items-center"
                        tag="transition-group" 
                        v-bind="dragOptions"
                        @start="drag=true" 
                        @end="drag=false" 
                        @change="log"
                        item-key="id"
                        :component-data="{
                            tag: 'ul',
                            name: 'flip-list',
                            type: 'transition'
                        }"
                    >
                            <template #item="{element}">
                                <li class="list-group-item" :key="element.id">
                                    <div class="draggable-grid__item" style="transform: translate3d(0px, 0px, 0px) scale(1);">
                                        <div class="site-box" title="">
                                            <a class="site-box__link">
                                                <div class="site-box__icon shadow">
                                                    <div class="site-box__icon-image" :style="`background-image: url('${element.icon}');`"></div>
                                                </div>
                                                <div class="site-box__label" contenteditable="false">{{ element.name }}</div>
                                            </a>
                                        </div>
                                    </div>
                                </li>
                            </template>
                        </draggable>

[timothymarois]

It looks like it only does that when you try to use tag="transition-group" which is what this example said to do:
https://github.com/SortableJS/vue.draggable.next/blob/master/example/components/transition-example.vue

[xbanki]

I'm not sure why this error occurs, but the current work around fix I'm personally using is as follows:

• Remove the tag property from component-data and just have type: 'transition-group'
• Set the prop tag separately to ul

You don't need to have transition & transition-group elements, just one parent transition-group element will do the job in most cases.

[FeckNeck]

Hi @xbanki I'm facing the same issue and not clearly understand your answer. Could you please put an example of your comment ? Thank you very much for your time.

[zphtown]

right answers:

<draggable v-model="myArray" :component-data="{name:'fade', type: 'transtion-group'}" item-key="id"> <template #item="{element}"> <div class="item" :class="{disabled: !!element.disabled}">{{element.name}}</div> </template> </draggable>

tips: Do not set tag=transtion-group, You should set component-data={type: 'transtion-group'} will be right。

[FeckNeck]

Tried out your suggestion but still not working in my case. Thanks for your help :

    <draggable
      v-model="teams"
      :component-data="{
        name: 'fade',
        type: 'transition-group',
      }"
      item-key="idteam"
      class="grid sm:grid-cols-3 xl:grid-cols-4 grid-cols-2 gap-6"
    >
      <template #item="{ element, index }">
        <my-team
          :key="element.idteam"
          :id="element.idteam"
          :name="element.teamName"
          :index="index"
          @getTeams="getTeams"
        ></my-team>
      </template>
    </draggable>

[YusufcanY]

Tried out your suggestion but still not working in my case. Thanks for your help :

    <draggable
      v-model="teams"
      :component-data="{
        name: 'fade',
        type: 'transition-group',
      }"
      item-key="idteam"
      class="grid sm:grid-cols-3 xl:grid-cols-4 grid-cols-2 gap-6"
    >
      <template #item="{ element, index }">
        <my-team
          :key="element.idteam"
          :id="element.idteam"
          :name="element.teamName"
          :index="index"
          @getTeams="getTeams"
        ></my-team>
      </template>
    </draggable>

Yes, i tried that too and didnt work on me too. I using nuxt 3 btw. It only happening when add tag="transition-group".

[iRuxu]

right answers:

<draggable v-model="myArray" :component-data="{name:'fade', type: 'transtion-group'}" item-key="id"> <template #item="{element}"> <div class="item" :class="{disabled: !!element.disabled}">{{element.name}}</div> </template> </draggable>

tips: Do not set tag=transtion-group, You should set component-data={type: 'transtion-group'} will be right。

it works.Thanks a lot!

[aliezzzz]

same problem on my demo.
TypeError: Cannot set properties of null (setting '__draggable_context')
this error only happen on tag="TransitionGroup" or tag="transition-group"

[xbanki]

For those who still run into this issue, see issue #180 that was opened above for a working example that is in-line with my previous suggestion.

[wsli10]

#145 fixed this but not to be merged 😮‍💨

As a temporary solution:

yarn add zhyswan-vuedraggable@4.1.3
import draggable from 'zhyswan-vuedraggable'