I need some help with this code snippet
HTML Code:
<div class="col-xs-4">
<h3 class="text-center">Incomplete task</h3>
<div class="well" style="max-height: 300px;overflow: auto;">
<ul id="check-list-box" class="list-group checked-list-box">
<li v-for="task in incompleteTasks" class="list-group-item">
<input type="checkbox" name="" @click="addToDone">
{{task.description}}
</li>
<!-- <li v-for="task in incompleteTasks" v-text="task.description" class="list-group-item">
<input type="checkbox" class="" /></li> -->
</ul>
<br />
</div>
</div>
Here's the JavaScript (JS) Code:
let data = {
heading:'Task List',
tasks :[
{description: 'GO to store', completed : false},
{description: 'SignUp Page', completed :false },
{description: 'Create New team', completed : false},
{description: 'Add Entity', completed : false},
{description: 'Add WorkFlow', completed : false}
]
};
new Vue({
el: '#root',
data: data,
methods: {
addToDone() {
this.completed = true;
console.log(this);
},
},
computed: {
heading() {
return this.heading;
},
incompleteTasks() {
return this.tasks.filter(task => !task.completed);
},
completeTasks() {
return this.tasks.filter(task => task.completed);
}
}
})
When a checkbox is clicked, I want to toggle the 'completed' property of that specific list item to True.
Could someone please guide me on how to achieve this?
Thank you!