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

[djkloop]

Github link

https://github.com/djkloop/vuedraggable-issuse-error.git

Step by step scenario

# Uncaught TypeError: Cannot read property 'element' of null

Actual Solution

# Dragging is normal for the first time, and an error will be reported when dragging back to the original position

Expected Solution

# Can't drag

[David-Desmaisons]

chnage v-model for :list

[djkloop]

/// https://github.com/djkloop/vuedraggable-issuse-error/blob/d53715bac973394f5d9f2b309e31cb7381878f08/src/views/Home.vue#L91

/// same error

onDragStart(evt) {
     /// No context found
      this.context = this.getUnderlyingVm(evt.item);
      evt.item._underlying_vm_ = this.clone(this.context.element);
      draggingElement = evt.item;
    }

/// Looking at the source code, it seems that I can't find ->  _underlying_vm_ <-

/// https://github.com/SortableJS/Vue.Draggable/blob/2c9fb74523ac1ab2e2d426004f6d690bdf684a04/src/vuedraggable.js#L288

getChildrenNodes() {
      if (this.noneFunctionalComponentMode) {
        return this.$children[0].$slots.default;
      }
      const rawNodes = this.$slots.default;
      if (this.transitionMode) {
       /// This vnode exists, but does not exist on the page
        if (
            (
              rawNodes[0] &&
              rawNodes[0].child &&
              rawNodes[0].child.$slots &&
              rawNodes[0].child.$slots.default &&
              rawNodes[0].child.$slots.default[0].elm
            ) &&
            !document.body.contains(rawNodes[0].child.$slots.default[0].elm)
            ) {
              debugger
          return rawNodes
        } else {
          return rawNodes[0].child.$slots.default
        }

      } else {
        return rawNodes
      }
    }

Environment

1. osx 10.14.6
2. Microsoft Edge 86.0.622.38
3. node v12.18.3

[altitudems]

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

[cocoroise]

is any way to fix this bug?😢

[djkloop]

is any way to fix this bug?😢

看上去没啥动静。

[whateveryoudo]

vuedraggable + antd-vue menu collapse 都有这个问题

[quietmint]

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.

[zhl5317]

collapse

vuedraggable + antd-vue menu collapse 都有这个问题

@whateveryoudo

请问你解决了嘛 折叠内部用draggable 失效

[whateveryoudo]

collapse

vuedraggable + antd-vue menu collapse 都有这个问题

@whateveryoudo

请问你解决了嘛 折叠内部用draggable 失效

目前改用了sortable.js + menu 自定义指令实现的（要不你就自己写功能组件）

[GustafHultgren]

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.

[Spice-King]

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.

[debniakn]

@Spice-King Hi, are you able to give some more piece of code? I'm using this "as" tag but it doesn't show transitionGroup component unfortunately

[Ken-vdE]

@debniakn

@Spice-King Hi, are you able to give some more piece of code? I'm using this "as" tag but it doesn't show transitionGroup component unfortunately

It should be 'tag', not 'as'.

[anthonygore]

Another cause of this error is if the dragged component uses fragments in the template.

[wujixiaofeng]

	<template #item="{element,index}">
		<div class="item">
			<component></component>
		</div>
	</template>嵌套一层div就没有再报错了