はVueのドラッグ可能な、私はVue.Draggableを使用している間違った項目

Question

を拾うイベントを追加：https://github.com/SortableJS/Vue.Draggable

フィドル：https://jsfiddle.net/o5pcLhhj/

私は二つのリストのセットアップとそれらの間でドラッグする能力を持っています。私は、私は何かがそのリストに追加されるときに検出可能な第2のリストにonAddイベントを追加しました：私は2番目のリストに「ジョン」や「ジョアン」をドラッグすると今

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

、イベントではありませんドラッグされたアイテムを正しくピックアップします。これは、1つのインデックスによってオフになっているようです。私が "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>