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

Question

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

我有两个列表设置并且可以在它们之间拖动。我在第二个列表中添加了一个 onAdd 事件，这样我就可以检测到什么时候添加到该列表中：

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

现在，如果我将 "John" 或 "Joao" 拖到第二个列表，事件将无法正确拾取被拖入的项目。它似乎偏离了一个索引。如果我将 "Jean" 拖入，它会正确拾取此项目。

我做错了什么？！

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

已更新 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>

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

Vue Draggable add event picking up incorrect item

javascript

vue.js

rubaxa-sortable