Vue.js 색인으로 jsons 목록에서 요소를 제거합니다.

Question

각 요소가 참조하는 특정 요소를 제거해야하는 "제거"단추가있는 요소 목록을 만들려고합니다.

여기에 제시된 : 제가보기에는 "설정"을 표시하지 않습니다

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

을 사용하고 있습니다 때마다 http://jsbin.com/jalexekeho/edit?html,js,console,output

내 문제가 (이름, 성) 내가 만약

사용하고 있습니다.

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

모든 설정은 다음과 같습니다. 예상대로 표시되지만 제거 버튼을 누르면 (!) 첫 번째 요소가 제거됩니다. (인덱스는 항상 0입니다.)

각 요소에 대해 미리 정의 된 키를 사용하지 않고이 문제를 어떻게 우아하게 해결할 수 있습니까? JsBin에 당신은 1.0을 사용하는 - 당신이 뷰 2.0에서 문서를 다음처럼 보인다 -

JS 스크립트는

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

그것은 VueJS 버전에 관하여입니다.

VueJS 2.0에서 $ index는 더 이상 사용되지 않습니다.

이 당신은 뷰의 이전 버전을 사용하고있는 것으로 보인다

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', 
})