I am facing an issue where I want to update the status of tasks based on a certain method call. However, the challenge lies in obtaining the index of the specific item within the array in order to modify its status. Here is my HTML setup:
<div class="main" id="my-vue-app">
<ul>
<li v-for="task in completeTask">
{{ task.description }} <button @click="markIncomplete">Mark as Incomplete</button>
</li>
</ul>
<ul>
<li v-for="task in incompleteTask">
{{ task.description }} <button @click="markComplete">Mark as Complete</button>
</li>
</ul>
</div>
Additionally, here is the Vue script snippet:
<script>
new Vue(
{
el: '#my-vue-app',
data:
{
tasks: [
{description:'go to market', status: true},
{description:'buy book', status: true},
{description:'eat biriani', status: true},
{description:'walk half kilo', status: false},
{description:'eat icecream', status: false},
{description:'return to home', status: false}
]
},
computed:
{
incompleteTask()
{
return this.tasks.filter(task => ! task.status);
},
completeTask()
{
return this.tasks.filter(task => task.status);
}
},
methods:
{
markComplete()
{
// Logic to mark task as complete
return this.task.status = true;
},
markIncomplete()
{
// Logic to mark task as incomplete
return this.task.status = false;
}
}
}
)
</script>
I am looking for a solution that enables me to utilize markComplete() and markIncomplete() effectively. The main roadblock I am facing is identifying how to access the index of the current element in order to adjust its status.