Vue Draggable add event picking up incorrect item

Question

I'm using Vue.Draggable: https://github.com/SortableJS/Vue.Draggable

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

I have two lists setup and the ability to drag between them. I've added an onAdd event to the second list so I can detect when something gets added to that list:

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

Now if I drag "John" or "Joao" to the 2nd list, the event is not correctly picking up the item that was dragged in. It seems to be off by one index. If I drag "Jean" in, it correctly picks up this item.

What am I doing wrong here?!

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

Thank you in advance!!

Answer 1

Use a different key. 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>

Updated fiddle.

Here I'm using the name, but the ideal would be some unique id property of each list item.

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

etc, and

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