Vue. Цикл for (директива v-for)

Следующая задача, которую мы рассмотрим - это задача перебора элементов, которые у нас есть на уровне данных. Т.е. мы будем разбираться с циклом for. 

Этот цикл часто используется в разных языках программирования и мы можем его использовать внутри шаблона Vue компонентов. Иметь дело с циклами приходится, пожалуй, также часто, как и с условным рендерингом.

С какими данными мы можем использовать этот цикл for:

1) Массив каких-то элементов

2) Массив объектов

3) Объекты. Мы можем "пробежаться" по ключам какого-то объекта. 

Пример использования для массива элементов.

Предположим, у нас есть уровень данных:

data() {

    return {

      items: ['1','2','3']

    }

}

Нам нужно пробежаться по этим элементам и вывести их в template. Цикл for можно организовать с помощью директивы v-for, которая должна быть прикреплена к какому-либо элементу DOM разметки.

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

Здесь items - это массив элементов, которые мы перебираем, а item - это тот конкретный элемент, который в данный момент перебирается.

Если вы используете Eslint в своем проекте, он может выдать ошибку для такого кода:

Element in iteration expect to have "v-bind:key" directives.

Или элемент итерации ожидает наличие директивы "v-bind:key".

Зачем это нужно указывать, мы позже поговорим в отдельном видео. Сейчас же я хотел продемонстрировать простой способ, как можно отойти от этой ошибки. Правда этот способ не устранит саму причину ошибки, но программа, по крайней мере, ошибку выдавать перестанет.

Для этого мы можем с вами преобразовать наш элемент следующим образом и в качестве ключа итерации использовать index элемента

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

index - это просто порядковый номер. От 0 до бесконечности, какой порядковый номер элемента мы с вами будем перебирать.

Если мы посмотрим вывод нашего template, то увидим все наши элементы li с нужными значениями.

Если у вас отключены инструменты проверки кода вроде Eslint, то вы можете вполне обойтись и без атрибута key. Все будет работать до определенных моментов, которые мы рассмотрим позже.

В итоге, наш код может выглядеть следующим образом:

<ul>

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

</ul>

Пример использования для массива объектов

На уровне данных у нас может быть также массив объектов:

  data() {

    return {

      items: [

        { text: "Элемент 1"},

        { text: "Элемент 2"},

        { text: "Элемент 3"},

]

}

  }

В этом случае мы можем обращаться к ключам перебираемого объекта следующим образом:

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

Другим вариантом получить ключ объекта может быть следующий:

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

Пример использования для объектов

Давайте разберем пример из документации, как директива v-for во Vue может обрабатывать объекты.

Предположим, что на уровне данных у нас есть некий объект:

data() {

    return {

      myObject: {

        title: 'How to do lists in Vue',

        author: 'Jane Doe',

        publishedAt: '2016-04-10'

      }

    }

  }

Когда мы применяем v-for для объектов будет использован специальный Javascript метод, который называется Object.keys(). Этот метод вернет все ключи объекта и по каждому ключу будет пробегаться цикл for. 

<li v-for="(value, key, index) in myObject"> {{ index }}. {{ key }}: {{ value }} </li>

Здесь, в отличии от перебора массивов у нас появляется дополнительный второй аргумент key, который выводит ключ объекта.

С помощью такой формы записи мы получим значение, ключи и индекс для перебираемого объекта.

Имейте ввиду, что если у вас есть объект на уровне данных, вы можете свободно перебирать его с помощью директивы v-for.

Vue. v-for с диапазоном данных

Еще один интересный пример, который хотелось разобрать при работе с директивой v-for - это работа с диапазонами данных. 

Если нам нужно повторить какое-то действие n-ое количество раз, мы можем это организовать следующим образом:

<div v-for="n in 10" :key="n">{{ n }}</div>

Здесь просто выводятся числа от 1 до 10. Таким образом можно вывести какой-то диапазон данных. 

Это полезно тем, что если нам нужно вывести какой-то блок большое количество раз и не прописывать все это в разметке.

Оператор of вместо in

Вместо оператора in можно воспользоваться оператором of. 

<li v-for="{text} of items">{{ text }}</li>

У нас все будет работать точно также. Операторы in и of являются синонимами и вы можете использовать тот оператор, который вам больше подходит.

По сути, директива v-for является аналогом Javascript метода forEach. Например,

items.forEach((item, index) => {

        // has access to outer scope `parentMessage`

        // but `item` and `index` are only available in here

        console.log(parentMessage, item.message, index)

      })

Мы перебираем все элементы и выполняем какие-то действия. 

Вложенность в v-for

Кроме того, мы с вам можем использовать циклы v-for, которые вложены друг в друга. Например,

<li v-for="item in items">

  <span v-for="childItem in item.children">

    {{ item.message }} {{ childItem }}

  </span>

</li>

Имейте ввиду такую возможность, что циклы v-for могут вкладываться друг в друга.

Вот такие основы по работе с директивой v-for, которые я хотел рассказать в этом материале. Жмите Далее, чтобы перейти к следующему материалу.