Unwanted table rows duplications, vue 3 and sortable

[Ben-Avrahami]

i get unwanted duplications, i made an event to move the data, and sometimes both vue reactivity and sortable update the dom and it makes a row appear twice, even though it appears only once in the actual data. is there anywat to prevent sortable from updating the actual dom and let vue reactivity update the dom?

[morgangraphics]

I just had a similar issue where I would remove an item from my list (using a splice) and the Sortable would render two of the same left over items from the list.

I got around this particular issue by setting a watcher on my list whose only function it to force a rerender for the Sortable component. e.g.

watch(<YOUR_ARRAY_HERE>, () => {
  // console.log('here');
});

[Ben-Avrahami]

I just had a similar issue where I would remove an item from my list (using a splice) and the Sortable would render two of the same left over items from the list.

I got around this particular issue by setting a watcher on my list whose only function it to force a rerender for the Sortable component. e.g.

watch(<YOUR_ARRAY_HERE>, () => {
  // console.log('here');
});

thanks! i managed to solve it by removing the item from the DOM using event.item.remove() and then let vues reactivity update and add to the DOM.

Edit: actually a better solution is to use a watch on the v-data-table items variable, and when it changes change the key of the v-data-table which force the table to rerender. as written here for example https://blog.logrocket.com/correctly-force-vue-component-re-render/

[bgervan]

I just had a similar issue where I would remove an item from my list (using a splice) and the Sortable would render two of the same left over items from the list. I got around this particular issue by setting a watcher on my list whose only function it to force a rerender for the Sortable component. e.g.

watch(<YOUR_ARRAY_HERE>, () => {
  // console.log('here');
});

thanks! i managed to solve it by removing the item from the DOM using event.item.remove() and then let vues reactivity update and add to the DOM.

Edit: actually a better solution is to use a watch on the v-data-table items variable, and when it changes change the key of the v-data-table which force the table to rerender. as written here for example https://blog.logrocket.com/correctly-force-vue-component-re-render/

Why do you prefer a rerender over the event.item.remove() ? Performance wise the second is better, isn't it?

[Ben-Avrahami]

I just had a similar issue where I would remove an item from my list (using a splice) and the Sortable would render two of the same left over items from the list. I got around this particular issue by setting a watcher on my list whose only function it to force a rerender for the Sortable component. e.g.

watch(<YOUR_ARRAY_HERE>, () => {
  // console.log('here');
});

thanks! i managed to solve it by removing the item from the DOM using event.item.remove() and then let vues reactivity update and add to the DOM. Edit: actually a better solution is to use a watch on the v-data-table items variable, and when it changes change the key of the v-data-table which force the table to rerender. as written here for example https://blog.logrocket.com/correctly-force-vue-component-re-render/

Why do you prefer a rerender over the event.item.remove() ? Performance wise the second is better, isn't it?

event.item.remove was buggy for me and had many edge use cases whan doing multi drag, so rerender solved it, maybe its less performance efficient but its working and much less buggy then using event.item.remove, at least in my usecase