Combining VueJS V-if directive with Vue Draggable

Question

I'm struggling to combine a list with a v-if directive in a Vue-Draggable component.

The use case is that users can order items in a long list, but also 'hide' sections of that list. The problem I encounter is that right after hiding items, VueJS draggable does not update the index. The strange thing is that after one-drag and drop event is completed (and has dropped the element in the wrong place due to the mismatch in index), the issue is resolved and subsequent drag and drop actions follow the view.

What I've tried:

• Bind the elements with a :key variable
• Use NextTick statements in all of the events that VueJS Draggable fires (change, update, sort, move, start, end, etc)
• Manually correct the oldIndex and newIndex value based on a second, fixed key parameter. I somehow seem to be unable to interfere with these indices being determined by the sortable plugin.
• Manually emitting events to update the Draggable element after hiding/showing.

Does anyone have examples of succesfully combining show directives with draggable components?

Answer 1

OK, so the key here was in the difference between the V-if and V-show directives. I was using the former, which removes the items from the DOM and causes the update problems.

If you use the latter, the DOM items will basically stay intact and the issue doesn't exist in the first place. Closing and leaving here in case someone stumbles over the same issue.