0

Недавно взялся изучать 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);
      }
    },
  },
2
  • Возьмите за правило, с циклом v-for всегда добавлять атрибут key ru.vuejs.org/v2/guide/…
    – Dmytro
    15 сен 2020 в 18:51
  • Да, ваше замечание, после некоторых манипуляций, привело к желаемому результату, благодарю. 16 сен 2020 в 16:46

1 ответ 1

0

В итоге пришёл к такому варианту:

Task.vue и TaskList.vue объединил в один файл и прикрепил к v-for`у v-bind:key, как советовал добрый человек в комментариях.

<template>
  <div>
    <ul>
      <li v-for="task in tasks" v-bind:task="task" v-bind:key="task.id">
        <span v-bind:class="{ done: task.completed }">
          <input
            type="checkbox"
            @change="task.completed = !task.completed"
            v-bind:checked="task.completed"
          />
          <strong>{{ task.id }}</strong>
          {{ task.title }}
        </span>
        <button class="remove" @click="$emit('remove-task', task.id)"></button>
      </li>
    </ul>
  </div>
</template>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.