Vue.js / vuedraggable : Adding "v-model" to a draggable makes it not draggable

Question

I have a problem using Vue.js and the library VueDraggable (https://github.com/SortableJS/Vue.Draggable) Here is a sample of code :

<draggable v-if="n === 2 && track.getDisplayArray()[1].length !==0"
       element="ul"
       :options="{group:'layers '+ track.itemId}"
       v-bind:class="{ hidden: !track.show, 'child-container': track.show }"
       v-model="track.getDisplayArray()[1]"
       :move="onMove"
       @start="onStart"
       @end="onFinished">
        <li class="item" v-bind:class="{ hidden: !layer.show, child: layer.show }"
            v-for="layer in track.getDisplayArray()[1]">
            <span>{{layer.name}}</span>
            <img class="item-view" src="static/img/ic_view.svg" alt="view">
        </li> 
</draggable>

onMove function just returns true, onStart and onFinished are empty (but I want to do something with them in the future ;) )

When the "v-model" property is here, the li tags which are created cannot be swapped.

When I remove this property, the li tags can be swapped.

Do you see the problem? Are they some "conflicts" between some properties that I am not aware of?

Answer 1

I found the solution of my problem. Changing v-model to value didn't change anything, because they don't see updates from the list they are linked to.

I replaced the "v-model" property by the property "list" .

According to the documentation :

The main difference is that list prop is updated by draggable component using splice method, whereas value is immutable.