I'm working on a small todo list application using Vue. The issue I'm facing is that when I check the first checkbox to mark a task as complete, the next task's checkbox gets automatically checked as well, but this does not happen with the last checkbox.
I have tested this on my local machine but unfortunately it did not work as expected. Here is the link to the code snippet
<div id="app">
<h1>Incomplete Tasks</h1>
<ul>
<li v-for="task in incompleteTasks">
<label>
<input type="checkbox" v-model="task.completed">
{{ task.description }}
</label>
</li>
</ul>
<h1>Complete Tasks</h1>
<ul>
<li v-for="task in completeTasks">
<label>
<input type="checkbox" v-model="task.completed">
{{ task.description }}
</label>
</li>
</ul>
new Vue({
el: '#app',
data: {
tasks: [
{ description: 'First Task', completed: false },
{ description: 'Second Task', completed: false },
{ description: 'Third Task', completed: false },
{ description: 'Fourth Task', completed: false }
]
},
computed: {
incompleteTasks() {
return this.tasks.filter(task => !task.completed);
},
completeTasks() {
return this.tasks.filter(task => task.completed);
}
}
})