Циклы в компонентах Vue

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

Создание компонентов в цикле

Поставим задачу: создать несколько компонентов в цикле по элементам массива. Пускай в настройке data будет находится массив. А сам цикл создадим, используя пример из предыдущей статьи с тегом <mousedc> и известную нам директиву v-for:

<div id="application">
   <mousedc 
      v-for="(text, index) in texts"
      v-bind:part="text"
      v-bind:key="index"
   ></mousedc>
</div>
<script>
   Vue.component('mousedc', {
      props: ['part', 'key'],
      template: '<div>{{ key }} - {{ part }}</div>',
   });
   let app = new Vue({
      el: '#application',
      data: {
         texts: ['Тише', 'мыши', 'кот', 'на', 'крыше'],
      },
   });
</script>

Обратите внимание, что мы не только сделали цикл по элементам через v-for="(text, index) in texts", но и сразу же использовали значения "text" и "index" внутри последующих атрибутов "v-bind", чтобы передать их в компонент. И в результате работы такого скрипта получится HTML код:

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