In my VueJs code, I have a simple task list with completed and incomplete tasks. When I check or uncheck the box, the task should move to the appropriate list.
var app = new Vue({
el: '#vueapp',
data: {
tasks: [{
id: 1,
description: 'Do some Stuff',
completed: false
},
{
id: 2,
description: 'Go to pharmacy',
completed: false
},
{
id: 3,
description: 'Go to doctor',
completed: true
},
{
id: 4,
description: 'Do some Slask',
completed: false
},
]
},
methods: {
toggleTask(key) {
this.tasks[key].completed = !this.tasks[key].completed;
}
},
computed: {
incompleteTasks() {
return this.tasks.filter(task => !task.completed);
},
completedTasks() {
return this.tasks.filter(task => task.completed);
},
}
});<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<div id="vueapp">
<h2>Completed Tasks</h2>
<ul>
<li v-for="(task, key) in completedTasks">{{ task.description }}<input type="checkbox" v-model="task.completed"></li>
</ul>
<h2>Incomplete Tasks</h2>
<ul>
<li v-for="(task, key) in incompleteTasks">{{ task.description }}<input type="checkbox" v-model="task.completed"></li>
</ul>
</div>When tested in Chrome, if you try to check the first incomplete task, it successfully moves to the upper list, but then the next incomplete task also gets checked. Be aware of this bug!