Vue Ziehbare hinzufügen Ereignis falschen Artikel Abholung

Question

Ich verwende Vue.Draggable: https://github.com/SortableJS/Vue.Draggable

Fiddle: https://jsfiddle.net/o5pcLhhj/

Ich habe zwei Listen Setup und die Fähigkeit, zwischen ihnen zu ziehen. Ich habe ein onAdd Ereignis in die zweite Liste hinzugefügt, so kann ich erkennen, wenn etwas zu dieser Liste hinzugefügt wird:

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

Nun, wenn ich „John“ oder „Joao“ auf die zweite Liste ziehen, ist das Ereignis nicht den Gegenstand, der hineingezogen wurde, richtig aufheben. Es scheint, um einen Index weg zu sein. Wenn ich "Jean" ziehe, nimmt es diesen Gegenstand richtig auf.

Was mache ich hier falsch ?!

Fiddle: https://jsfiddle.net/o5pcLhhj/

Vielen Dank im Voraus !!

Answer 1

Verwenden Sie einen anderen Schlüssel. 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> 

Aktualisiert fiddle.

Hier verwende ich den Namen, aber das Ideal wäre eine einzigartige id Eigenschaft jedes Listenelements.

list: [ 
    { name: "John", id: 1 }, 
    { name: "Joao", id: 2 }, 
    { name: "Jean", id: 3 } 
}], 

usw. und

<div v-for="(element, index) in list" :key="element.id">{{element.name}}</div>