Issues using Vue.Draggable + Vuex

[Nrqz]

Hi, I'm trying to implement an application that uses Vue.Draggable to sort a collection that is stored in a Vuex store.

The problem is related to the DOM modifications Vue.Draggable / SortableJS does. Is there any way to disable this behaviour and let Vuex reorganize the DOM from the state?

P.D: I attach a jsfiddle with the Vue.Draggable example that shows my problem.

https://jsfiddle.net/sqssmhtz/15/

Thanks for your help!

[David-Desmaisons]

Hi @Nrqz , what is hapening in your scenario is that:

1. Sortable is performing changes in the DOM to reflect drag and drop
2. Draggable component does not perform any DOM changes as the list options is null (when the list is not null, draggable componet perform an "undo" on changes performed by Sortable)
3. OnEnd event performs changes on the list
4. Vue.js sees change in the list and updates the DOM but since the DOM has been altered by Sortable, the DOM changes provided by vue.js will not reflect the real state of the list.

As for today, the only work-around is to use list option and by-pass Vuex store.

To handle your need a possibility would be to provide a draggable option that would not perform list synchronization but will "revert" drag-and-dom DOM modification, kind of a manual mode.
This mode should be used very carefully since any changes in the list should be changed by ad-hoc state changes in the store, otherwise inconsistency will be introduced.

I am not sure to what extend you need the store in this case ans I wiould like to hear from you the benefit from this approach. Because if you want to go this way, you will need to re-implement many scenarios (paste between lists, case where DOM index does not match list index, ect..) that are already supported using the list option.

I would like to hear your feedback.

[Nrqz]

Thanks for your answer @David-Desmaisons .

In my case, I need to use Vuex because the data I'm managing will be saved to a file and reused in other parts of my electron app, but you gave me an idea, use a computed as the source of the list parameter with a proxy array that send the changes to the store.

I think that it has some performance overhead but not on a critical part of my application so i can deal with it.

I let you a fiddle with this solution implemented to serve as future documentation if someone has the same issues as me. If you want, you can use it as Vue.Draggable with Vuex documentation.

Thanks again!

[David-Desmaisons]

Thanks @Nrqz for the feedback and the fidlle!