Vue.Draggable icon indicating copy to clipboard operation
Vue.Draggable copied to clipboard

Not working with Socket.io

Open khalednadam opened this issue 1 year ago • 0 comments

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)
});

Actual Solution

Expected Solution

khalednadam avatar Feb 19 '24 20:02 khalednadam