How come the todo item below a crossed one becomes crossed when a todo-item above is deleted?
For instance:
item1 item2 item3 item4
Mark item3 as crossed out:
item1 item2 item3 X item 4
Delete item 2:
item1 item3 item4 X
What mistake did I make in my Vue code? I just started learning Vue yesterday, so my error is probably fundamental.
<div id="app">
<todo-list>
</todo-list>
</div>
<style>
.crossed {
text-decoration : line-through;
}
.todo:hover {
cursor: pointer;
font-weight: bold;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
Vue.component('todo-list',{
data: function () {
return {
newText: '',
todos:[],
todoId: 0
}
},
template: `
<div>
<form v-on:submit.prevent="addTodo">
<input v-model="newText">
<button>ADD TODO</button>
</form>
<ul>
<todo class="todo" v-for="(todo,index) in todos" :text="todo.text" :key="todo.todoId" @remove="removeTodo(index)"></todo>
</ul>
</div>
`,
methods: {
addTodo: function() {
this.todos.push({
text: this.newText,
done: false,
id: this.todoId++
});
this.newText = '';
},
removeTodo: function(index) {
this.todos.splice(index,1);
}
}
});
Vue.component('todo',{
props: ['text'],
data: function () {
return {
done: false
}
},
template: `
<li>
<span v-on:click="done = !done" :class="{crossed: done}">
{{text}}
</span>
<button v-on:click="$emit('remove')">Remove</button>
</li>
`
})
new Vue({
el: '#app'
})
</script>