Vue.js / vuedraggable ：将 "v-model" 添加到可拖动对象使其不可拖动

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

当"v-model" 属性出现时，创建的li标签不能互换。

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

你看到问题了吗？它们是否在我不知道的某些属性之间 "conflicts"？

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.

Vue.js / vuedraggable ：将 "v-model" 添加到可拖动对象使其不可拖动

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

draggable

vue.js