Vue的可拖動添加事件撿不正確項

Question

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

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

我有兩個列表的設置以及它們之間拖動的能力。我已經添加了一個使用onAdd事件到第二列表，以便我能察覺當事情被添加到這個列表：

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

現在，如果我拖「約翰」或「若昂」的第二列表，該事件不是正確地拾取被拖入的項目。它似乎被一個索引關閉。如果我拖動「Jean」，它會正確拾取此項目。

我在這裏做錯了什麼？

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

預先感謝您！

Answer 1

使用不同的密鑰。 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>