Как правильно итерировать массив в шаблоне Vue?

Question

Массивы во Vue итерируются с помощью v-for. Нужно использовать уникальный key для каждого элемента. Логика должна оставаться в скрипте, а шаблон — простым. Не рекомендуется выполнять сложные вычисления прямо в шаблоне. Это делает код понятнее и стабильнее.

YeaHub · Accepted Answer

Итерация массивов в шаблоне должна быть простой и предсказуемой.Рекомендуемый подходКорректная итерация выглядит так:

Почему важно упрощать шаблонЛучше:готовить данные заранееиспользовать computed-свойстваизбегать сложных выражений в v-forПлохо читаемый шаблон сложнее поддерживать и тестировать.Использование индексаИндекс допустим:для отображения номерадля статичных списков без измененийНо он не должен использоваться как основной key.Ошибки, которых стоит избегатьЧастые проблемы:отсутствие keyиспользование сложной логики в шаблонемутация данных прямо во время рендераКраткий выводПравильная итерация массива во Vue — это простой v-for, уникальный key и минимум логики в шаблоне.