Як працює v-for?

VueJunior~1 хв читання

v-for - це директива Vue, яка використовується для рендерингу списків: масивів, об'єктів, чисел і навіть результатів ітераторів.

Простіше кажучи:

v-for повторює шаблон для кожного елемента колекції.

Базовий синтаксис

html

<li v-for="item in items">{{ item }}</li>

data() {
  return {
    items: ['A', 'B', 'C']
  }
}

Результат - три <li>.

html

<li v-for="(item, index) in items">
  {{ index }} - {{ item }}
</li>

Vue вимагає вказувати :key для коректного трекінгу елементів:

html

<li v-for="user in users" :key="user.id">
  {{ user.name }}
</li>

Навіщо?

html

<div v-for="(value, key, index) in user" :key="key">
  {{ key }}: {{ value }}
</div>

Порядок такий: (value, key, index).

html

<div v-for="n in 5">{{ n }}</div>

Виведе цифри 1-5.

Для групування:

html

<template v-for="item in list" :key="item.id">
  <h3>{{ item.title }}</h3>
  <p>{{ item.text }}</p>
</template>

<template> сам у DOM не рендериться.

На одному елементі ставити не можна (Vue 3):

html

<li v-for="item in items" v-if="item.visible">Не можна</li>

Але можна через <template>:

html

<template v-for="item in items" :key="item.id">
  <li v-if="item.visible">{{ item.name }}</li>
</template>

Або краще фільтрувати заздалегідь:

visibleItems() {
  return this.items.filter(i => i.visible)
}

html

<div v-for="([key, value]) in Object.entries(obj)" :key="key">
  {{ key }}: {{ value }}
</div>

Можна передавати item як пропси:

html

<UserCard
  v-for="user in users"
  :key="user.id"
  :user="user"
/>

Vue робить так:

Без key Vue використовує ін-плейс патчинг - може поводитися непередбачувано.

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.