我正在使用Vue.Draggable:https://github.com/SortableJS/Vue.Draggable
小提琴:https://jsfiddle.net/o5pcLhhj/
我有两个列表设置和在它们之间拖动的功能。我已将onAdd事件添加到第二个列表中,以便我可以检测何时将某些内容添加到该列表中:
onAdd: function(evt) {
console.log(evt.item);
}
现在,如果我拖动约翰"或者" Joao"到第二个列表,事件没有正确地拾取被拖入的项目。它似乎被一个索引关闭。如果我拖着#34; Jean"在,它正确地拿起这个项目。
我在这里做错了什么?!
小提琴:https://jsfiddle.net/o5pcLhhj/
提前谢谢!!
答案 0 :(得分:2)
使用其他密钥。 Indexes are not very good keys
<div v-for="(element, index) in list" :key="element.name">{{element.name}}</div>
...
<div v-for="(element, index) in list2" :key="element.name">{{element.name}}</div>
更新了fiddle。
我在这里使用了名称,但理想的是每个列表项的一些唯一id
属性。
list: [
{ name: "John", id: 1 },
{ name: "Joao", id: 2 },
{ name: "Jean", id: 3 }
}],
等,
<div v-for="(element, index) in list" :key="element.id">{{element.name}}</div>