Best way to use with nested elements and Vuex

[range-of-motion]

Code
Demo

Step by step scenario

1. Open the demo
2. Open your browser's console
3. Re-arrange a nested element inside it's parent
4. Nothing shows up in the console, right?
5. Re-arrange a "root" element
6. Now the console shows that the elements have changed, right?

Actual Solution

Cry.

Expected Solution

That re-arranging nested elements works?

[David-Desmaisons]

It is working check the exaample:

https://sortablejs.github.io/Vue.Draggable/#/nested-with-vmodel

https://sortablejs.github.io/Vue.Draggable/#/nested-example

[range-of-motion]

Right, but mine doesn't. And (as far as I know) it's an exact copy of your v-model example.

I created an isolated repo and demo for you, if you could help me figure out what the problem is I would greatly appreciate that 🙂

[David-Desmaisons]

@range-of-motion nested dragging are complex cases especially ehen integarted with vuex store.
Unfortunatelly I don't have the time to review all the code you wrote and look for a problem.
Main lines:
-Use computed and v-model to commit changes when dra has ended.
I would advice you to try to stick to the provide examples and make incremental changes.

[range-of-motion]

Thanks for the quick responses–you're being very helpful.

Vuex isn't the cause of this bug. Merely changing the order of nested elements doesn't emit the update emitter.

I think your example also has this issue I'm describing.

[donnysim]

Kind of anti VueX but the example persists nested changes directly to VueX store object without the need of the computed setter, the event does not reach root component with vModel to persist the changes and trigger the setter. The setter is only triggered for root changes. This kind of leave a very difficult situation on figuring out how to correctly persist the change without modifying the instance on VueX if we want to be VueX safe, where everything is changed using mutations, keeping mutation log etc..

For events, I'm not sure if this is possible to solve elegantly because of component nesting, but mostly it would need to pass the events all the way up the chain to the first child, which then would emit them to the main component, but some events need to emit specific values? For example the input event should only emit it's shallow copied current value without changing the actual prop value passed to it, where the parent then replaces it in it's shallow copied value, and then emits it back to parent and so on? resulting in always achieving a new object and thus always executing the computed setter to update the VueX store without modifying the actual object.

[David-Desmaisons]

@range-of-motion If you can reproduce on the example, could you detail, which example, step by step scenario and actual vs expected?

[range-of-motion]

@David-Desmaisons alright, so it's very simple. I forked your repository and added a console.log statement to prove my point.

You can clone it yourself and run it locally, but I created a recording for you and everyone else. Re-ordering parent elements works fine, as you can see in the console–there is an event that's being emitted. But re-ordering nested elements doesn't emit an event.

That's the bug.

[range-of-motion]

@David-Desmaisons anything else you need from me?

[David-Desmaisons]

With the context, I understand the question.
I agree with @donnysim that the current solution is a Vuex antipatern has it mutates directly store data.
My point of view:
this is a Vuex design question on how to design a store data and action to represent nested data.
Once the solution found, use v-model binding with draggable and use computed properties to get the list and perform the corresponding actions.
At the end, utimatelly, it is not a vue,draggable issue.
I guess stack-overflow would be the perfect place to discuss this kind of design and pro and cons of possible solution.

[TLA020]

Did you find a solution for this problem, as it's a vue-dragable issue.

Maybe we should emit an event with the new created array, where we can trigger a action inside our vuex store to "commit" this new array to the store.

Directly changing the state is considered badpractice. (anti pattern) and will not work in strict mode.

[donovanhare]

Would also be interested in a solution - I don't think the example page should be promoting an example that does not work as intended.

[esvit]

I have faced with the same problem. Created a small component as work around for the issue. Maybe it will be useful for someone https://codepen.io/esvit/pen/abzZjax

[FE-Mars]

I have faced with the same problem.