142
rated 0 times
[
148]
[
6]
/ answers: 1 / hits: 39674
/ 6 Years ago, fri, april 6, 2018, 12:00:00
I want to change the status of Tasks when a particular method is called. But The problem is I cannot get the index of the particular item of the array to change its status.
This is my HTML:
<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>
And this is my Vue:
<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()
{
return this.task.status = true;
},
markIncomplete()
{
return this.task.status = false;
}
}
}
)
</script>
I need make use of markComplete() and markIncomplete() but the problem is I couldn't find the way to get the index of current element to change its status.
More From » arrays
