Только начала изучение js-фреймворка vue. Не могу кое-что реализовать. Есть список со всеми заданиями, есть списки с не сделанными заданиями и заданиями выполненными (скриншот). У списка со всеми заданиями есть кнопки, на нажатие определённой кнопки задание должно добавляться в список complete tasks или incomplete tasks в зависимости от того, какая кнопка была нажата (не смотрите на грамматически неверное название кнопок, я потом исправлю). Реализовать это нужно, используя вычисляемые методы (computed) или собственные методы. Помогите, пожалуйста! Буду очень благодарна. Вот код:
<html>
<head>
<title></title>
</head>
<body>
<div id="root">
<h2>All Tasks</h2>
<ul>
<li v-for="task in tasks">
{{ task.description }}
<button @click = 'addInIncompleted'>Incompleted</button>
<button @click = 'addInCompleted'>Completed</button>
</li>
</ul>
<h2>Incomlete Tasks</h2>
<ul>
<li v-for = 'task in incompleteTasks' v-text = 'task.description'></li>
</ul>
<h2>Сomlete Tasks</h2>
<ul>
<li v-for = 'task in completeTasks' v-text = 'task.description'></li>
</ul>
</div>
<script src ="https://unpkg.com/vue@2.6.11/dist/vue.js"></script>
<script>
var app = new Vue({
el: "#root",
data: {
tasks: [
{description: 'Go to the school', completed: true},
{description: 'Go to the store', completed: false},
{description: 'Go to the walking', completed: true},
{description: 'Go to the gym', completed: false},
{description: 'Go to the park', completed: true},
{description: 'Go to the room', completed: false}
]
},
computed: {
incompleteTasks() {
return this.tasks.filter(task => !task.completed);
},
completeTasks() {
return this.tasks.filter(task => task.completed);
}
}
});
</script>
</body>
</html>