Что нужно использовать для рендера списка на Vue

Ответ

Для рендера списков во Vue используется директива v-for. Она позволяет перебирать массив или объект и генерировать элементы на основе данных.

<template>
  <ul>
    <li v-for="(item, index) in items" :key="item.id">
      {{ index + 1 }}. {{ item.name }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' }
      ]
    }
  }
}
</script>

Ключевые моменты:

  1. Всегда указывайте :key с уникальным значением (лучше id)
  2. Можно использовать второй параметр - индекс элемента
  3. Работает с массивами и объектами
  4. Для объектов синтаксис: v-for="(value, key, index) in object"