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>

视图未显示“设置”（姓名，姓氏）

如果我正在使用

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

所有设置都将按预期显示，但（！）删除按钮将导致第一个元素被删除。（索引始终为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版本 - 似乎你遵循了Vue 2.0中的文档 - 在JsBin上你使用的是1.0。

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

Vue.js通过索引

1 个答案: