vue-dragula icon indicating copy to clipboard operation
vue-dragula copied to clipboard

Appropriate value for 'v-dragula' binding?

Open shortstuffsushi opened this issue 6 years ago • 1 comments

Sorry if this is another noob question, but I'm really struggling to piece this together from your example page, docs, and example files.

Same demo

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.

shortstuffsushi avatar Jun 11 '18 16:06 shortstuffsushi

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".

MrYakobo avatar May 26 '21 11:05 MrYakobo