javascript - 为什么index-of在vuejs中不能正常工作？

Question

我在 Vue.js 中创建了一个自定义组件。在我的组件中，我有一个带有删除按钮的列表。单击按钮时，它会删除该行。如果我单击任何行，它会删除最后一行，因为索引总是 -1 为什么？这是我的代码 https://plnkr.co/edit/hVQKk3Wl9DF3aNx0hs88?p=preview

 methods: {
        deleteTodo:function (item) {
            console.log(item)
            var index = this.items.indexOf(item);
            this.items.splice(index, 1);
        }
    }

下面是完整代码

var MyComponent = Vue.extend({
    template:'#todo-template',
    props:['items'],
    computed: {
        upperCase: function () {
            return this.items.map(function (item) {
                return {name: item.name.toUpperCase(),complete:item.complete};
            })
        }
    },
    methods: {
        deleteTodo:function (item) {
            console.log(item)
            var index = this.items.indexOf(item);
            this.items.splice(index, 1);
        }
    }
})
Vue.component('my-component', MyComponent)

var app = new Vue({
    el: '#App',
    data: {
        message: '',
        items: [{
            name: "test1",
            complete:true
        }, {
            name: "test2",
            complete:true
        }, {
            name: "test3",
            complete:true
        }]
    },
    methods: {
        addTodo: function () {
           this.items.push({
               name:this.message,
               complete:true
           });
           this.message ='';
        },
    },
    computed: {
        totalCount:function () {
            return this.items.length;
        }
    }
});

Answer 1

您应该传递项目的索引，而不是传递整个对象。

将 for 循环更改为

 <li v-for="(item, index) in upperCase" v-bind:class="{'completed': item.complete}">
        {{item.name}}
        <button @click="deleteTodo(index)">X</button>
        <button @click="deleteTodo(index)">Toggle</button>
 </li>

和删除函数

deleteTodo:function (itemIndex) {
    this.items.splice(itemIndex, 1);
}

更新代码:Link