Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Як працює v-for?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**`v-for`** - це директива Vue, яка використовується для рендерингу списків: масивів, об'єктів, чисел і навіть результатів ітераторів. Вона повторює шаблон для кожного елемента колекції. **Ключове:** без атрибута `:key` Vue використовує ін-плейс патчинг, який може поводитися непередбачувано.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення`v-for` - це директива Vue, яка використовується для **рендерингу списків**: масивів, об'єктів, чисел і навіть результатів ітераторів. Простіше кажучи: > `v-for` **повторює шаблон для кожного елемента колекції.** --- ## Базовий синтаксис ```html <li v-for="item in items">{{ item }}</li> ``` ```js data() { return { items: ['A', 'B', 'C'] } } ``` Результат - три `<li>`. --- ## Змінні ітератора: `item`, `index` ```html <li v-for="(item, index) in items"> {{ index }} - {{ item }} </li> ``` --- ## Обов'язковий атрибут `key` Vue вимагає вказувати `:key` для коректного трекінгу елементів: ```html <li v-for="user in users" :key="user.id"> {{ user.name }} </li> ``` Навіщо? - покращує продуктивність - допомагає правильно оновлювати DOM - запобігає багам при перестановках --- ## Ітерація по об'єкту ```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. --- ## v-for всередині template Для групування: ```html <template v-for="item in list" :key="item.id"> <h3>{{ item.title }}</h3> <p>{{ item.text }}</p> </template> ``` `<template>` сам у DOM не рендериться. --- ## Комбінація з v-if На одному елементі ставити **не можна** (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> ``` Або краще фільтрувати заздалегідь: ```js visibleItems() { return this.items.filter(i => i.visible) } ``` --- ## Кортежі (array of arrays) ```html <div v-for="([key, value]) in Object.entries(obj)" :key="key"> {{ key }}: {{ value }} </div> ``` --- ## v-for з компонентами Можна передавати item як пропси: ```html <UserCard v-for="user in users" :key="user.id" :user="user" /> ``` --- ## Як працює v-for "під капотом" Vue робить так: 1. Проходить по колекції 2. Створює віртуальні DOM-ноди для кожного елемента 3. Зіставляє їх за ключами (`key`) 4. Оптимально оновлює реальні DOM-вузли при зміні даних Без `key` Vue використовує **ін-плейс патчинг** - може поводитися непередбачувано.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.