SortableJS / vue.draggable.next

Vue 3 compatible drag-and-drop component based on Sortable.js
https://sortablejs.github.io/vue.draggable.next/#/simple
MIT License
3.91k stars 531 forks source link

Component totally crashes if item is not called `element` #261

Closed kdekooter closed 5 months ago

kdekooter commented 5 months ago

Migrating from Vue 2 I followed the sample code. And as good programming practice requires I named my element properly.

<draggable 
  v-model="myArray" 
  group="people" 
  @start="drag=true" 
  @end="drag=false" 
  item-key="id">
  <template #item="{product}">
    <div>{{product.name}}</div>
   </template>
</draggable>

Resulting in this horrendous picture:

renderFnWithContext@http://localhost:8080/node_modules/.vite/deps/chunk-V4CC3ZXY.js?v=6c12b319:2436:13
node_modules/vuedraggable/dist/vuedraggable.umd.js/</fb15/computeNodes/defaultNodes<@http://localhost:8080/node_modules/.vite/deps/vuedraggable.js?t=1717055584671&v=93385504:13036:26
computeNodes@http://localhost:8080/node_modules/.vite/deps/vuedraggable.js?t=1717055584671&v=93385504:13035:51
computeComponentStructure@http://localhost:8080/node_modules/.vite/deps/vuedraggable.js?t=1717055584671&v=93385504:13067:41
render@http://localhost:8080/node_modules/.vite/deps/vuedraggable.js?t=1717055584671&v=93385504:13154:71
renderComponentRoot@http://localhost:8080/node_modules/.vite/deps/chunk-V4CC3ZXY.js?v=6c12b319:2494:17
componentUpdateFn@http://localhost:8080/node_modules/.vite/deps/chunk-V4CC3ZXY.js?v=6c12b319:6912:45
run@http://localhost:8080/node_modules/.vite/deps/chunk-V4CC3ZXY.js?v=6c12b319:1410:23
baseCreateRenderer/setupRenderEffect/instance.update@http://localhost:8080/node_modules/.vite/deps/chunk-V4CC3ZXY.js?v=6c12b319:6965:17
updateComponent@http://localhost:8080/node_modules/.vite/deps/chunk-V4CC3ZXY.js?v=6c12b319:6774:18
processComponent@http://localhost:8080/node_modules/.vite/deps/chunk-V4CC3ZXY.js?v=6c12b319:6708:22
patch@http://localhost:8080/node_modules/.vite/deps/chunk-V4CC3ZXY.js?v=6c12b319:6163:27
patchKeyedChildren@http://localhost:8080/node_modules/.vite/deps/chunk-V4CC3ZXY.js?v=6c12b319:7118:14
patchChildren@http://localhost:8080/node_modules/.vite/deps/chunk-V4CC3ZXY.js?v=6c12b319:7032:29
patchElement@http://localhost:8080/node_modules/.vite/deps/chunk-V4CC3ZXY.js?v=6c12b319:6458:20
processElement@http://localhost:8080/node_modules/.vite/deps/chunk-V4CC3ZXY.js?v=6c12b319:6294:19
patch@http://localhost:8080/node_modules/.vite/deps/chunk-V4CC3ZXY.js?v=6c12b319:6151:25
patchKeyedChildren@http://localhost:8080/node_modules/.vite/deps/chunk-V4CC3ZXY.js?v=6c12b319:7118:14
patchChildren@http://localhost:8080/node_modules/.vite/deps/chunk-V4CC3ZXY.js?v=6c12b319:7032:29
patchElement@http://localhost:8080/node_modules/.vite/deps/chunk-V4CC3ZXY.js?v=6c12b319:6458:20
processElement@http://localhost:8080/node_modules/.vite/deps/chunk-V4CC3ZXY.js?v=6c12b319:6294:19
patch@http://localhost:8080/node_modules/.vite/deps/chunk-V4CC3ZXY.js?v=6c12b319:6151:25
componentUpdateFn@http://localhost:8080/node_modules/.vite/deps/chunk-V4CC3ZXY.js?v=6c12b319:6921:14
run@http://localhost:8080/node_modules/.vite/deps/chunk-V4CC3ZXY.js?v=6c12b319:1410:23
baseCreateRenderer/setupRenderEffect/instance.update@http://localhost:8080/node_modules/.vite/deps/chunk-V4CC3ZXY.js?v=6c12b319:6965:17
rerender/<@http://localhost:8080/node_modules/.vite/deps/chunk-V4CC3ZXY.js?v=6c12b319:2132:14
rerender@http://localhost:8080/node_modules/.vite/deps/chunk-V4CC3ZXY.js?v=6c12b319:2124:25
tryWrap/<@http://localhost:8080/node_modules/.vite/deps/chunk-V4CC3ZXY.js?v=6c12b319:2190:14
@http://localhost:8080/src/components/products/ProductList.vue?t=1717056407258:435:25
accept/<@http://localhost:8080/@vite/client:35:102
fetchUpdate/<@http://localhost:8080/@vite/client:222:19
queueUpdate/<@http://localhost:8080/@vite/client:193:64
queueUpdate@http://localhost:8080/@vite/client:193:42
async*handleMessage/<@http://localhost:8080/@vite/client:606:38
handleMessage@http://localhost:8080/@vite/client:604:47
setupWebSocket/<@http://localhost:8080/@vite/client:515:22
EventListener.handleEvent*setupWebSocket@http://localhost:8080/@vite/client:514:12
@http://localhost:8080/@vite/client:501:14

After a lot of trial-and-error noticed that as long as it is called element the component works.

Please make it possible to use our own names in this component.

Unlimited23 commented 5 months ago

@kdekooter try #item={element: product}

kdekooter commented 5 months ago

@Unlimited23 That did the trick, thanks!

Would be great if this was somehow documented + properly caught and reported in the console.