Недавно взялся изучать vue.js и сделал простенький список дел. Список нормально отрисовывается, фильтр нормально фильтрует, но когда внутри примененного фильтра "Выполненные/Невыполненные задачи" меняешь статус задачи, происходит не то, чего я ожидаю: При нажатии на любой инпут, например "сходить в магазин", первая задача пропадает (переходит в "выполненные", это норм), но галочка (checked) ставится на следующий элемент.
Такое ощущение, что происходит конфликт нумерации элементов массива (с 0) и id задачи (с 1), но я не вижу где ошибка.
Task.vue - экземпляр задачи
<template>
<li>
<span v-bind:class="{ done: task.completed }">
<input
type="checkbox"
@change="task.completed = !task.completed"
v-bind:checked="task.completed"
/>
<strong>{{ index + 1 }}</strong>
{{ task.title }}
</span>
<button class="remove" @click="$emit('remove-task', task.id)"></button>
</li>
</template>
TaskList.vue - список задач
<template>
<div>
<ul>
<Task
v-for="(task, i) of tasks"
v-bind:task="task"
v-bind:index="i"
@remove-task="removeTask"
/>
</ul>
</div>
</template>
Main.vue - основной файл страницы
<template>
<div class="main">
<AddTask @add-task="addTask" />
<select class="select" v-model="filter">
<option value="all">Все задачи</option>
<option value="completed">Выполненные задачи</option>
<option value="not-completed">Невыполненные задачи</option>
</select>
<Loader v-if="loading" />
<TaskList
v-else-if="filteredTasks.length"
v-bind:tasks="filteredTasks"
@remove-task="removeTask"
/>
<p v-else>Список пуст</p>
</div>
</template>
Настройка фильтра в Main.vue
computed: {
filteredTasks() {
if (this.filter === "all") {
return this.tasks;
}
if (this.filter === "completed") {
return this.tasks.filter((tasks) => tasks.completed);
}
if (this.filter === "not-completed") {
return this.tasks.filter((tasks) => !tasks.completed);
}
},
},