Vue.Draggable: 【Bug】Uncaught TypeError: Cannot read property 'element' of null

I flipped it around and used tag="div" :component-data="{ as: 'transition-group' }" and it worked better.

Might not apply here since I’m on Vue 3.2 and Vue.Draggable.Next v4.1, but this thread did give the answers as to stuff about the fatherNode error, so I feel it’s at least worth punting here for the next person. If anyone wants to confirm it in the Vue 2 version, be my guest, I don’t have a Vue 2 app handy.

chnage v-model for :list

I had the same issue when dragging between two lists if I use tag="transition-group" (but not when I use the default tag="div"). The error indicated that inserting the node failed, something about fatherNode being a text node (so it couldn’t access children).

I fixed it by using tag="transition-group" :component-data="{ tag: 'div' }" to cause <transition-group> to output an actual DOM element.

I had the same issue when dragging between two lists if I use tag="transition-group" (but not when I use the default tag="div"). The error indicated that inserting the node failed, something about fatherNode being a text node (so it couldn’t access children).

I fixed it by using tag="transition-group" :component-data="{ tag: 'div' }" to cause <transition-group> to output an actual DOM element.

Removes the error on my part as well, but makes the elements flicker in an undesireable way. Would be really nice to have it working with vanilla transition-group.

This bug seems to be caused by using the new v-slot:default syntax, where vnode.elm is not defined.

See: https://github.com/vuejs/vue/issues/10450