Хабрахабр

[Перевод] Vue.js для начинающих, урок 4: рендеринг списков

Сегодня, в четвёртом уроке учебного курса по Vue, мы поговорим о том, как выводить на страницу списки элементов.

Vue.js для начинающих, урок 1: экземпляр Vue
Vue.js для начинающих, урок 2: привязка атрибутов
Vue.js для начинающих, урок 3: условный рендеринг

Цель урока

Нам нужно вывести в карточке товара дополнительные сведения о нём. Эти сведения должны быть представлены в виде списка, содержащего следующее:

  • 80% cotton
  • 20% polyester
  • Gender-neutral

Начальный вариант кода

Начнём работу с такого HTML-кода (файл index.html):

<div class="product"> <div class="product-image"> <img :src="image" /> </div> <div class="product-info"> <h1>{{ product }}</h1> <p v-if="inStock">In stock</p> <p v-else>Out of Stock</p> </div></div>

Вот как будет выглядеть объект data, используемый при создании экземпляра Vue в main.js:

data: { product: "Socks", image: "./assets/vmSocks-green.jpg", inStock: true, details: ['80% cotton', '20% polyester', 'Gender-neutral']}

Здесь появилось новое свойство — массив details.

Задача

Необходимо вывести на странице содержимое массива details. Для этого требуется найти ответы на вопросы о том, как перебрать массив, и о том, как визуализировать его данные.

details: ['80% cotton', '20% polyester', 'Gender-neutral']

Решение задачи

Тут нам поможет ещё одна директива Vue — v-for. Она позволяет перебирать массивы и выводить содержащиеся в них данные.

Добавим в index.html следующий код:

<ul> <li v-for="detail in details">{{ detail }}</li></ul>

Благодаря этому на странице появится список дополнительных сведений о товаре.

Список на странице

Синтаксическая конструкция, используемая в кавычках вместе с директивой v-for, покажется знакомой тем, кто пользовался JavaScript-циклами for of или for in. Поговорим о том, как работает директива v-for.

Здесь мы используем существительное в единственном числе (detail) в качестве псевдонима для строковых значений, извлекаемых из массива. Затем мы пишем in и указываем имя коллекции, которую перебираем (details). В двойных фигурных скобках указывается то, какие именно данные мы хотим выводить ({{ detail }}).

Так как конструкция v-for находится внутри элемента <li>, Vue выведет новый элемент <li> для каждого элемента массива details. Если бы директива v-for использовалась внутри элемента <div>, тогда для каждого элемента массива выводился бы элемент <div>, визуализирующий значение этого элемента массива.

Директиву v-for можно представить себе в виде конвейера, на котором имеется манипулятор. Он берёт элементы коллекции, по одному за раз, и собирает список.

image
Директива v-for похожа на конвейер

Рассмотрим ещё один пример применения v-for, более сложный. Здесь мы будем выводить в элементе <div> данные, хранящиеся в массиве объектов.

Перебор массива объектов

Карточка товара, разработкой которой мы занимаемся, нуждается в возможности выводить сведения о разных вариантах одного и того же товара. Эти сведения содержатся в массиве объектов variants, который хранится в объекте с данными data. Как перебрать этот массив объектов для вывода данных?

Вот массив, о котором идёт речь:

variants: [ { variantId: 2234, variantColor: 'green' }, { variantId: 2235, variantColor: 'blue' }]

В объектах, которые содержатся в данном массиве, имеется название цвета и идентификатор варианта товара.

Выведем эти данные на странице:

<div v-for="variant in variants"> <p>{{ variant.variantColor }}</p></div>

Список вариантов товара

Здесь нам нужно вывести на страницу лишь название цвета, соответствующее разным вариантам товара. Поэтому мы, обращаясь к элементам массива, используем точечную нотацию. Если бы мы, в фигурных скобках, написали {{ variant }}, то на страницу вывелся бы весь объект.

Обратите внимание на то, что при рендеринге подобных элементов рекомендуется использовать специальный атрибут key. Это позволяет Vue отслеживать идентичность элементов. Добавим такой атрибут в наш код, используя в качестве его значения уникальное свойство variantId объектов, содержащих сведения о вариантах товара:

<div v-for="variant in variants" :key="variant.variantId"> <p>{{ variant.variantColor }}</p></div>

Практикум

Добавьте в объект с данными массив sizes, содержащий сведения о размерах носков, и, используя директиву v-for, выведите данные из этого массива на странице в виде списка.

Массив sizes может выглядеть так:

sizes: ['S', 'M', 'L', 'XL', 'XXL', 'XXXL']

Вот заготовка, которую вы можете использовать для решения этой задачи.

Вот решение задачи

Итоги

Сегодня мы узнали следующее:

  • Директива v-for позволяет перебирать массивы для вывода содержащихся в них данных.
  • В конструкции v-for для доступа к элементам массива используется псевдоним. Здесь же указывается и имя самого массива. Например, это может выглядеть так: v-for=«item in items».
  • При переборе массива объектов можно использовать точечную нотацию для доступа к свойствам объектов.
  • При использовании v-for рекомендуется назначать каждому выводимому элементу уникальный ключ.

Заглядываете ли вы в документацию Vue, занимаясь по этому курсу?

Vue.js для начинающих, урок 1: экземпляр Vue
Vue.js для начинающих, урок 2: привязка атрибутов
Vue.js для начинающих, урок 3: условный рендеринг

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть