Vue Draggable添加事件拾取不正确的项目

时间:2017-08-28 20:42:27

标签: javascript vue.js rubaxa-sortable

我正在使用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/

提前谢谢!!

1 个答案:

答案 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>