我在使用 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 不会改变任何内容,因为他们看不到链接到的列表中的更新。
我用属性“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 : Adding "v-model" to a draggable makes it not draggable,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45345204/