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

Question

我正在使用 Vue.Draggable：https : //github.com/SortableJS/Vue.Draggable

小提琴：https : //jsfiddle.net/o5pcLhhj/

我有两个列表设置和在它们之间拖动的能力。我在第二个列表中添加了一个 onAdd 事件，这样我就可以检测何时向该列表添加了某些内容：

onAdd: function(evt) {
  console.log(evt.item);
}

现在，如果我将“John”或“Joao”拖到第二个列表中，则该事件无法正确拾取被拖入的项目。它似乎偏离了一个索引。如果我将“Jean”拖进去，它会正确地选择这个项目。

我在这里做错了什么？！

小提琴：https : //jsfiddle.net/o5pcLhhj/

先感谢您！！

Answer 1

使用不同的键。索引不是很好的键。

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

更新了小提琴。

这里我使用了名称，但理想的情况是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>