Vue.Draggable
Vue.Draggable copied to clipboard
Not working with Socket.io
First check https://github.com/SortableJS/Vue.Draggable/blob/master/CONTRIBUTING.md
I am trying to implement a draggable lists that updates automatically when other users update a list using socket.io, whenever I emit an event I get this error:
TypeError: normalizedList.flatMap is not a function
at computeNodes (http://localhost:5173/node_modules/.vite/deps/vuedraggable.js?t=1708368434127&v=62e0fd19:13003:51)
at computeComponentStructure (http://localhost:5173/node_modules/.vite/deps/vuedraggable.js?t=1708368434127&v=62e0fd19:13035:29)
at Proxy.render (http://localhost:5173/node_modules/.vite/deps/vuedraggable.js?t=1708368434127&v=62e0fd19:13122:46)
at renderComponentRoot (http://localhost:5173/node_modules/.vite/deps/chunk-ALMAR3QU.js?v=62e0fd19:2478:17)
at ReactiveEffect.componentUpdateFn [as fn] (http://localhost:5173/node_modules/.vite/deps/chunk-ALMAR3QU.js?v=62e0fd19:6876:26)
at ReactiveEffect.run (http://localhost:5173/node_modules/.vite/deps/chunk-ALMAR3QU.js?v=62e0fd19:1409:23)
at instance.update (http://localhost:5173/node_modules/.vite/deps/chunk-ALMAR3QU.js?v=62e0fd19:6929:17)
at updateComponent (http://localhost:5173/node_modules/.vite/deps/chunk-ALMAR3QU.js?v=62e0fd19:6738:18)
at processComponent (http://localhost:5173/node_modules/.vite/deps/chunk-ALMAR3QU.js?v=62e0fd19:6672:7)
at patch (http://localhost:5173/node_modules/.vite/deps/chunk-ALMAR3QU.js?v=62e0fd19:6127:11)
it works very well without adding the socket event emit.
Jsfiddle link
Step by step scenario
1- add vue draggable as you would normally after importing it
<Draggable v-model="cards" class="space-y-3" drag-class="drag" ghost-class="ghost" group="cards" item-key="id"
tag="ul" @change="onChange">
<template #item="{ element }">
<Card :card="element" />
</template>
</Draggable>
2- in script add the socket event emit
socket.on('change-in-list', (boardId) => {
cards.value = getCardsOfList(props.list.id)
});