Я только начала изучение vue js, немного знаю про js. Хотелось бы полностью понять этот код. Особую проблему вызвала данная строчка:
toggleCompleted(task) {
const index = this.tasks.findIndex(x => x.id === task.id)
this.tasks[index].completed = !this.tasks[index].completed;
}
Полный код:
<!DOCTYPE html>
<head>
<title></title>
</head>
<body>
<div id="root">
<h2>All Tasks</h2>
<ul>
<li v-for="task in tasks">
{{ task.description }}
<button @click="toggleCompleted(task)">
<span v-if="task.completed">Incompleted</span>
<span v-else>Completed</span>
</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: [{
id: 1,
description: 'Go to the school',
completed: true
},
{
id: 2,
description: 'Go to the store',
completed: false
},
{
id: 3,
description: 'Go to the walking',
completed: true
},
{
id: 4,
description: 'Go to the gym',
completed: false
},
{
id: 5,
description: 'Go to the park',
completed: true
},
{
id: 6,
description: 'Go to the room',
completed: false
}
]
},
computed: {
incompleteTasks() {
return this.tasks.filter(task => !task.completed);
},
completeTasks() {
return this.tasks.filter(task => task.completed);
}
},
methods: {
toggleCompleted(task) {
const index = this.tasks.findIndex(x => x.id === task.id)
this.tasks[index].completed = !this.tasks[index].completed;
}
}
});
</script>
</body>
</html>
Простой
