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

您的代码假设indexOf将返回有效索引

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

如果它返回-1，则表示它没有在列表中找到item。很可能this.items不是你想象的那样。

一些防御性代码可以帮助您解决这个问题：

    deleteTodo:function (item) {
        console.log(item)
        var index = this.items.indexOf(item);
        if (index === -1)
          console.error("Could not find item "+item in list: ",this.items);
        else
          this.items.splice(index, 1);
    }

这将显示你的控制台输出中的this.items

Answer 2

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

将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

为什么索引在vuejs中无法正常工作？

2 个答案: