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”属性。

根据文件：

主要区别在于列表道具由draggable组件使用splice方法更新，而值是不可改变的。

Vue.js / vuedraggable：将“v-model”添加到draggable使其无法拖动

1 个答案: