Vue.jsインデックスからjsonsのリストから要素を削除する

Question

それぞれの要素が参照する特定の要素を削除する「削除」ボタンがある要素のリストを作成しようとしています。

ここに提示したよう： http://jsbin.com/jalexekeho/edit?html,js,console,output

私は

<person v-for="(person,index) in list"\ 
    :settings="person"\ 
    @remove="list.splice(index, 1)">\ 
    </person> 

を使用していたときにビューが（姓） "設定" を示していないというのが私の問題

もしI使用しています

<person v-for="person in list"\ 
     :settings="person"\ 
     @remove="list.splice(index, 1)">\ 
     </person> 

すべての設定は期待どおりに表示されますが、削除ボタンを押すと最初の要素が削除されます。 （インデックスは常に0です）

各要素にあらかじめ定義されたキーを使用せずにこの問題を洗練された方法で解決するにはどうすればよいですか？

JSスクリプトは、それがVueJSバージョンについてです

Vue.component('person', { 
    template: '<div>{{ settings.name }}\ 
    {{ settings.last}}</div>\ 
    <button @click="$emit(\'remove\')" >remove</button>', 
    props:['settings'] 
}) 


Vue.component('people', { 
    template: '<person v-for="(person,index) in list"\ 
    :settings="person"\ 
    @remove="list.splice(index, 1)">\ 
    </person> \ 
    ', 
    props: ['list'], 
}); 


new Vue({ 
    el: '#app', 
}) 

Answer 1

では - あなたはVueの2.0からドキュメントを続くように思える - JsBinにあなたが1.0を使用しています。

VueJS 2.0では、$ indexは非推奨です。

これは、あなたがのVueの古いバージョンを使用しているように見える

Vue.component('person', { 
    template: '<div>{{ settings.name }}\ 
    {{ settings.last}}</div>\ 
    <button @click="$emit(\'remove\')" >remove</button>', 
    props:['settings'] 
}) 


Vue.component('people', { 
    template: '<person v-for="person in list"\ 
    :settings="person"\ 
    @remove="list.splice($index, 1)">\ 
    </person> \ 
    ', 
    props: ['list'], 
}); 


new Vue({ 
    el: '#app', 
})