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

Question

我在使用 Vue.js 和 VueDraggable 库时遇到问题 ( https://github.com/SortableJS/Vue.Draggable )这是一个代码示例:

<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 函数只返回 true，onStart 和 onFinished 是空的(但我想在将来用它们做点什么；))

当“v-model”属性在这里时，不能交换创建的 li 标签。

当我删除此属性时，可以交换 li 标签。

你看到问题了吗？它们是否存在我不知道的某些属性之间的“冲突”？

Answer 1

我找到了问题的解决方案。将 v-model 更改为 value 并没有改变任何东西，因为它们看不到它们链接到的列表中的更新。

我用属性“list”替换了“v-model”属性。

根据文档:

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