I created a Vue.js custom component with a list that includes a delete button. However, whenever I click on the button to delete a row, it always deletes the last row instead of the intended one. Why is this happening? To see my code, click on the provided link: 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);
}
}
Full 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;
}
}
});