Vue.draggable: Draggable adds undefined element to list when using draggable option

[bborn]

First check https://github.com/SortableJS/Vue.Draggable/blob/master/CONTRIBUTING.md

Jsfiddle link

https://jsfiddle.net/94r7ewtn/

Step by step scenario

1. Open JS console
2. Drag the last item in the list to the top

Actual Solution

JS error appears in console:
TypeError: Cannot read property 'name' of undefined

Expected Solution

Should not raise an error when dragging.

It looks like Draggable is adding an undefined item to the list. Maybe it's looping through the draggable wrapper element's children and adding the first, non-draggable item even though the "draggable" prop has been set to ignore it?

[David-Desmaisons]

For this kind of scenario use header slot.

[bborn]

@David-Desmaisons thanks - looks like the header slot option only works if the header is placed after the draggable elements. If the header slot is placed first, same error occurs.

Might be worth adding to the docs.

[andreasvirkus]

the header slot option only works if the header is placed after the draggable elements

@bborn thank you for saving me after 3-4 hours of trying virtually everything.. 🙇

For me, the issue was that the moved.element was undefined in the event payload.