Циклы в Vue

Как мы выяснили в предыдущей статье "Введение в фреймворк Vue", существует возможно добавить в настройку объекта (в "data") массив из элементов. Для вывода этого массива можно воспользоваться механизмом, который предлагает Vue.

Цикл по массиву в Vue

Попробуем создать массив, модифицировав пример из предыдущей статьи:

let app = new Vue({
   el: '#application',
     data: {
      items: ['Тише', 'мыши', 'кот', 'на', 'крыше']
   },
});

Для вывода его содержимого можно использовать цикл. В Vue такой цикл можно создать с помощью html тега <li> с атрибутом "v-for". В значении атрибута мы поставим "item in items", чтобы перебрать все значения внутри массива, который передаётся по ключу "items". Внутри тега <li> будет доступно значение текущего выбранного элемента через переменную "item". Продемонстрируем код:

<div id="application">
   <ul>
      <li v-for="item in items">{{ item }}</li>
   </ul>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         items: ['Тише', 'мыши', 'кот', 'на', 'крыше']
      },
   });
</script>

Результат выполнения этого кода будет таким:

<div id="application">
   <ul>
      <li>Тише</li>
      <li>мыши</li>
      <li>кот</li>
      <li>на</li>
      <li>крыше</li>
   </ul>
</div>

Если потребуется вывести не только значение элемента, но и его индекс, то необходимо иизменить значение атрибута "v-for" на "(item, index) in items". Тогда в переменной "index" будет находиться индекс текущего элемента при переборе. Изменим предыдущий пример, чтобы вывести ещё и индексы элементов

<div id="application">
   <ul>
      <li v-for="(item, index) in items">{{ index }} - {{ item }}</li>
   </ul>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         items: ['Тише', 'мыши', 'кот', 'на', 'крыше']
      },
   });
</script>

Результат выполнения этого кода будет таким:

<div id="application">
   <ul>
      <li>0 - Тише</li>
      <li>1 - мыши</li>
      <li>2 - кот</li>
      <li>3 - на</li>
      <li>4 - крыше</li>
   </ul>
</div>

Цикл по объекту в Vue

Атрибут "v-for" может перебирать не только массивы, но и объекты. Причем в цикле для объектов будет доступкно значение, ключ и индекс. Изменим предыыдущий пример, поставив объект из строк:

<div id="application">
   <ul>
      <li v-for="(value, key, index) in obj">{{ index }} {{ key }} {{ value }}</li>
   </ul>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         obj: { // объект, который будем использовать в цикле
            'Тише,': 'мыши, кот на крыше.', 
            'А котята': 'ещё выше', 
         }
      },
   });
</script>

Результат выполнения этого кода будет таким:

<div id="application">
   <ul>
      <li>0 - Тише, мыши, кот на крыше.</li>
      <li>1 - А котята ещё выше</li>
   </ul>
</div>

Циклы по многомерным массивам в Vue

Попробуем сделать цикл по многомерному массиву. Для этого создадим массив, в элементах которого будут объекты. Тогда доступ к свойству объекта будем получать через ключ точно так же, как при простом запросе. Изменим предыдущий пример, чтобы показать это:

<div id="application">
   <ul>
      <li v-for="item in items">{{ item.text }} {{ item.name }}</li>
   </ul>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         items: [
            {'name': 'мыши', 'text': 'Тише' },
            {'name': 'кот', 'text': 'На крыше' },
            {'name': 'котята', 'text': 'Ещё выше' },
         ]
      },
   });
</script>

Результат работы скрипта будет таким:

<div id="application">
   <ul>
      <li>Тише мыши</li>
      <li>На крыше кот</li>
      <li>Ещё выше котята</li>
   </ul>
</div>

Несколько тегов в циклах Vue

Во всех предыдущих примерах мы ставили в цикл ровно один тег <li>, давая ему атрибут "v-for". Но если нужно сделать цикл, который будет выводить сразу несколько тегов, то необходимо воспользоваться тегом <template>. Этот тег специально зарезервирован в Vue. Он является служебным и после выполнения кода он будем удалён.

Попробуем переписать один из предыдущих примером, выводя сразу несколько тегов <li> в каждой итерации цикла:

<div id="application">
   <ul>
      <template v-for="(item, index) in items">
         <li>{{ item }}</li>
         <li>{{ index }}</li>
      </template>
   </ul>
</div>
<script>
   let app = new Vue({
      el: '#application',
      data: {
         items: ['Тише', 'мыши', 'кот', 'на', 'крыше']
      },
   });
</script>

Как можно заметить из кода, мы собрались сделать недопустимое действие с точки зрения вёрстки. То есть в тег <ul> вставить что-то помимо тега <li>. Но не переживайте, в результате выполнения кода все вспомогательные элементы будут удалены и мы получим:

<div id="application">
   <ul>
      <li>Тише</li>
      <li>0</li>
      <li>мыши</li>
      <li>1</li>
      <li>кот</li>
      <li>2</li>
      <li>на</li>
      <li>3</li>
      <li>крыше</li>
      <li>4</li>
   </ul>
</div>