v-for breaks after drag'n'drop DOM manipulation #2745
Description
Attempt to use Dragula alongside with Vue
Vue.js version
1.0.21
Reproduction Link
https://jsfiddle.net/17j1L9c1/1/
Steps to reproduce
- After loading the fiddle, drag the third item somewhere out of the
<ul>and drop it there, so that Dragula’scancelevent fires (see console log) -- OR -- alternatively drag the first item to the third position.) - Click the add item button.
What is Expected?
Another item to be added to the list
What is actually happening?
Uncaught TypeError: Cannot read property 'parentNode' of null
Adding new items works fine after other drag'n'drop operations, also after dragging and cancelling other items than the last one. Dragging and cancelling the last item seems to throw in most cases.
Appearantly Dragula puts the actual <li> element back to it’s former position in the DOM, it still has its __v_frag object. Yet Vue seems to lose track of it somehow... ?
I found a workaround for this issue by replacing the array with a fresh array (refreshModel() in the fiddle) and thus triggering Vue to rerender the v-for. This is not an elegant solution though, as any watchers on the array will fire too, altough the array's order didn't change in case of a cancel event.
The workaround is here: https://jsfiddle.net/L8y4fry1/1/