Why index-of not working correctly in vuejs?

Question

I make a custom component in Vue.js .In My component, I have a list which has a delete button.On click of a button, it deletes the row.If I click any row it deletes the last row because the index is always -1 why? here is my code 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);
        }
    }

below Whole code

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;
        }
    }
});

Shubham Patel · Accepted Answer · 2017-09-02 07:11:22Z

1

Instead of passing the whole object you should pass the index of the item.

Change the for loop to

 <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>

and the delete function to

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

Updated Code: Link

answered Sep 2, 2017 at 7:11

Shubham Patel

3,3091 gold badge26 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mikkel · Accepted Answer · 2017-09-02 07:10:51Z

Your code is assuming that indexOf will return a valid index

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

If it's returning -1, it means that it's not finding the item in the list. Quite likely this.items is not what you think it is.

A bit of defensive code will help you solve this:

    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 will show you what this.items is in your console output

Collectives™ on Stack Overflow

Why index-of not working correctly in vuejs?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related