Vue.Draggable Property or method "children" is not defined when using move prop in nested list

Property or method "children" is not defined when using move prop in nested list

Open jgaehring opened this issue 5 years ago • 4 comments

I'm working on a prototype for a draggable nested list and getting a strange set of errors whenever the move function prop is called on the parent item:

[Vue warn]: Property or method "children" is not defined on the instance but
referenced during render. Make sure that this property is reactive, either in
the data option, or for class-based components, by initializing the property.
See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.


found in


---> <DraggableNested> at /src/components/DraggableNested.vue

       <Draggable>

         <DraggableNested> at /src/components/DraggableNested.vue

           <Draggable>

             <DraggableNested> at /src/components/DraggableNested.vue

               <DraggableAreas> at /src/components/DraggableAreas.vue

                 <Root>

I'm not referencing a property called children anywhere in my template, so I suspect this is coming from somewhere in the <draggable> component itself? I've looked closely at the source, particularly the onDragMove method:

https://github.com/SortableJS/Vue.Draggable/blob/78d970c3de85a4c2dceed4b0f58edc5b38d5666c/src/vuedraggable.js#L457-L472

I can't see a reference to a children property anywhere in there, but there are numerous references elsewhere to this.$children and this.$el.children. Or maybe something in the computeChildrenAndOffsets function that gets called in the render method? I'm at a loss.

It's important to emphasize, too, that this issue only appeared once I started passing a move function prop to draggable.

Jsfiddle link

https://codesandbox.io/s/stupefied-silence-vktui?file=/src/components/DraggableNested.vue

Step by step scenario

Drag and drop an item to or from the root position. This bug does not appear when moving children items to another child position.

Actual Solution

The drag and drop operation seems to work, and my move callback is getting the move event object (as seen in the console), but the console is also blowing up with so many error/warning messages.