Справочник Vue

v-for: выводим списки во Vue

Директива v-for повторяет элемент или компонент для каждого значения коллекции. Стабильный :key помогает Vue сохранить правильные DOM-узлы и состояние компонентов.

Рабочий пример

<ul>
  <li v-for="lesson in lessons" :key="lesson.id">
    {{ lesson.title }}
    <button @click="remove(lesson.id)">Удалить</button>
  </li>
</ul>

Форма (item, index) in items даёт индекс, но использовать его как key в изменяемом списке нежелательно. Отфильтрованные данные лучше подготовить в computed, а не ставить v-if рядом с v-for.

Когда применять

Перебирай данные с постоянным идентификатором. Для компонента key задаётся на самом компоненте или элементе template, который повторяется.

Проверь пример самостоятельно: измени исходные данные, убери одну строку и сравни результат. Такой короткий эксперимент помогает увидеть роль каждого свойства или метода и не превращает обучение в механическое копирование.

Частые ошибки

• Использовать индекс как key при сортировке
• Сочетать v-if и v-for на одном элементе
• Изменять исходный массив внутри computed