Vue.js / vuedraggable ：将“v-model”添加到可拖动使其不可拖动答案

【问题标题】：Vue.js / vuedraggable : Adding "v-model" to a draggable makes it not draggableVue.js / vuedraggable ：将“v-model”添加到可拖动使其不可拖动
【发布时间】：2017-07-27 08:24:52
【问题描述】：

我在使用 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 标签可以被交换。

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

【问题讨论】：

控制台中有消息吗？如果将v-model 替换为:value 会发生什么？
控制台中没有消息。这里有人对我说也将 v-model 更改为 value （但不幸的是，他/她删除了他/她的答案 o_o ）......但问题仍然存在。我找到了解决方案，请在下面查看我的答案。如果您有其他解决方案，请随时发表评论，这可能会很有趣:)

标签： vue.js draggable

【解决方案1】：

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

我将“v-model”属性替换为“list”属性。

根据文档：

主要区别在于 list 属性由可拖动组件使用 splice 方法更新，而 value 是不可变的。

【讨论】：