vue-dragula
vue-dragula copied to clipboard
Appropriate value for 'v-dragula' binding?
Sorry if this is another noob question, but I'm really struggling to piece this together from your example page, docs, and example files.
Notice that if you collapse / expand groups after dragging, the components are effectively reset -- the data isn't actually changed. I assume that this is because I don't have the v-dragula
binding set correctly. I've tried a number of different values for this including:
- A unique identifier for each row (almost certain this is wrong)
- The property on the element being updates (
group.items
in my example) - A global variable for the items being modified
In this case, I would expect the second item there to be the correct one, as the code seems to be doing some splicing logic (which I was keyed into by incorrectly using a string identifier as mentioned). It seems that this library is attempting to manipulate the data array backing it, but perhaps this doesn't work in the case that you have a multi-level component or something?
Hopefully my sample makes sense to demonstrate the issue, if not I can try to make it more clear.
Each time you expand the dropdown (with v-if="expanded"
), the row component is remounted and thus the state doesn't persist. You want v-show="expanded"
instead. Fixed fiddle
Regarding your question on what to supply for v-dragula
, it is definitely "the property on the element being updated".