Вопрос проверяет знание best practices при рендеринге списков и умение избегать типичных ошибок во Vue-шаблонах.
Массивы во Vue итерируются с помощью v-for. Нужно использовать уникальный key для каждого элемента. Логика должна оставаться в скрипте, а шаблон — простым. Не рекомендуется выполнять сложные вычисления прямо в шаблоне. Это делает код понятнее и стабильнее.
Итерация массивов в шаблоне должна быть простой и предсказуемой.
Корректная итерация выглядит так:
<li v-for="item in items" :key="item.id">
{{ item.title }}
</li>
Лучше:
готовить данные заранее
использовать computed-свойства
избегать сложных выражений в v-for
Плохо читаемый шаблон сложнее поддерживать и тестировать.
Индекс допустим:
для отображения номера
для статичных списков без изменений
Но он не должен использоваться как основной key.
Частые проблемы:
отсутствие key
использование сложной логики в шаблоне
мутация данных прямо во время рендера
Правильная итерация массива во Vue — это простой v-for, уникальный key и минимум логики в шаблоне.