v-for
Отображение массива элементов с помощью v-for
Используйте директиву v-for для отрисовки списка элементов на основе массива данных. У директивы v-for особый синтаксис записи: item in items, где items — исходный массив, а item — ссылка на текущий элемент массива:
Внутри блока v-for нам доступны свойства из области видимости родителя. У v-for также есть второй опциональный параметр с индексом текущего элемента.
Вместо in разделителем можно использовать of, как в итераторах JavaScript:
v-for для объекта
v-for можно также использовать для итерирования по свойствам объекта
Можно использовать второй аргумент для получения имени свойства (ключа объекта):
И третий — для индексов:
Важно!
При итерировании по объекту порядок обхода такой же как и в Object.keys(). Его консистентность не гарантируется при использовании различных реализаций движков JavaScript.
Сохранение состояния
Обновление списка vue
При обновлении Vue списка элементов, отображаемого директивой v-for, по умолчанию используется стратегия обновления «на месте». Если порядок элементов массива или объекта изменился, Vue не станет перемещать элементы DOM, а просто обновит каждый элемент «на месте», чтобы он отображал новые данные по соответствующему индексу. Во Vue версий 1.x подобное поведение достигалось указанием track-by="$index"
Режим по умолчанию эффективен, но применим только в случаях, когда результат отрисовки вашего списка не полагается на состояние дочерних компонентов или временные состояния DOM (например, значения полей форм)
Чтобы подсказать Vue, как отслеживать идентичность каждого элемента, что позволит переиспользовать и перемещать существующие элементы, укажите уникальный атрибут key для каждого элемента:
Рекомендуем всегда указывать атрибут key с v-for, кроме случаев когда итерируемый контент DOM прост, или вы сознательно используете стратегию обновления по умолчанию для улучшения производительности.
Нужно знать
Не указывайте в качестве ключей v-for непримитивные значения. Вместо этого используйте строковые или числовые значения.
Подробнее про использование атрибута key можно прочитать в документации API
Отслеживание изменений в массивах
Методы внесения изменений
Vue оборачивает у наблюдаемого массива методы внесения изменений, чтобы они вызывали обновления представления. Оборачиваются следующие методы:
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
Можете открыть консоль и поиграть с массивом items из предыдущего примера, вызывая его методы внесения изменений, например: example1.items.push({ message: 'Baz' })
Замены в массиве
Методы внесения изменений
Как следует из их названия, изменяют оригинальный массив, на котором они вызываются. Существуют и неизменяющие методы, такие как filter(), concat() и slice(), они не вносят изменений в изначальный массив, а всегда возвращают новый массив. При работе с неизменяющими методами можно просто заменять старый массив на новый:
Можно предположить, что Vue придётся выбросить существующий DOM и заново отрисовать список целиком, но, к счастью, это не так. Во Vue есть умные эвристики для максимизации переиспользования элементов DOM, поэтому замена одного массива другим, в случае совпадения части элементов этих массивов, будет очень эффективной операцией.
Предостережения
Вследствие ограничений JavaScript, есть виды изменений, которые Vue не может обнаружить при работе с массивами и объектами. Это обсуждается в разделе реактивности.
Фильтр / Сортировка
Отображение отфильтрованных/отсортированных результатов
Иногда хочется отобразить отфильтрованную или отсортированную версию массива, не изменяя оригинальные данные. В таком случае создайте вычисляемое свойство, возвращающее отфильтрованный или отсортированный массив.
В ситуациях, когда вычисляемые свойства невозможно использовать (например, внутри вложенных циклов v-for), просто используйте метод:
v-for и диапазоны
В v-for можно передать целое число. В этом случае шаблон будет повторён указанное число раз.
v-for и тег template
Подобно использованию с v-if, также можно использовать тег template с директивой v-for для отображения блока из нескольких элементов. Например:
v-for и v-if
Важно
Обратите внимание, что не рекомендуется использовать вместе v-if и v-for
Когда присутствуют вместе на одном элементе, v-for имеет больший приоритет, чем v-if. Поэтому v-if будет выполняться для каждой итерации цикла. Это полезно, когда нужно отобразить только некоторые элементы списка,
В результате будут отображены только задачи, которые ещё не выполнены.
Если необходимо по условию пропускать выполнение всего цикла, переместите v-if на внешний элемент (или на template). Например:
НЕ используйте v-for и v-if вместе во избежание ошибок! даже если очень хочется, используйте для таких случаев template
Важно знать
template не попадет в итоговое dom-дерево, имейте это ввиду, это "теневой" элемент который помогает в различных случаях, но не стоит работать с ним как с реальным дом узлом.
Компоненты и v-for
Эта секция подразумевает, что вы уже знакомы с компонентами. Не стесняйтесь пропустить её сейчас и вернуться потом.
Можно использовать v-for на компонентах, как и на обычных элементах:
Однако, в компонент никакие данные не передаются автоматически, поскольку у компонентов изолированные области видимости. Для передачи итерируемых данных в компонент необходимо явно использовать входные параметры:
Причина, почему item не передаётся в компонент автоматически, в том, что это сделает компонент жёстко связанным с логикой работы v-for. Но если указывать источник данных явно, компонент можно будет использовать и в других ситуациях.