artekha ,
Дмитрий Беляев совершенно правильно вам намекает на computed. Опишу подробнее: у вас есть "список всех задач". А вам нужно получить "список выполненных задач" и "список невыполненных". Вы берете и делаете следующее (все это для примера):
var vm = new Vue({
.....
data: {
tasks: []
},
computed: {
completedTasks() {
return _.filter(this.tasks, (task) => task.completed);
},
pendingTasks() {
return _.filter(this.tasks, (task) => !task.completed);
}
}
....
})
а потом используете эти самые completedTasks и pendingTasks:
<div id='app'>
<div>Completed:</div>
<div v-for='task in completedTasks'>
<span>{{ task.text }}</span>
<input type='checkbox' v-model='task.completed'>
</div>
<br>
<div>Pending:</div>
<div v-for='task in pendingTasks'>
<span>{{ task.text }}</span>
<input type='checkbox' v-model='task.completed'>
</div>
</div>
Вот вам
codepen для наглядности.
