My goal is to delete only the item that has been clicked on.
todoList Component:
template :
<ul class="list-group">
<todo v-for="(todo,i) in todo" :key="i" :todoString="todo.todoString" :completed="todo.completed"
@on-delete="del(todo)" />
</ul>
script :
data() {
return {
todo: [
{ todoString: "make videos Angular", completed: true },
{ todoString: "make videos React", completed: false },
{ todoString: "make videos Vue", completed: true },
{ todoString: "make videos Javascript", completed: false },
],
};
},
del(deltodo) {
this.todo = this.todo.filter(todos => {
todos.todoString !== deltodo.todoString;
console.log(this.todo.length)
});
console.log(this.todo.length)
},
TodoComponent :
template:
<li class="d-flex align-items-center list-group-item">
<button class="btn border-0 text-left flex-grow-1">{{todoString}}</button>
<form action="" class="flex-grow-1">
<input type="text" class="form-control">
</form>
<button class="btn btn-outline-primary">Edit</button>
<button key="" @click="$emit('on-delete')" class="btn btn-outline-danger">delete</button>
</li>
script :
props:{
todoString:String,
completed:Boolean
},
The issue arises when I delete one item, as it ends up deleting all the items.