Содержание цикла

1. Article 1
2. Article 2

v-for

Директива для отображения элементов массива

const menuItems = ref([
  {
    title: 'Index',
    link: '/'
  },
  {
    title: 'Contacts',
    link: '/contacts'
  }
])

Шаблон

<div v-for = "item in menuItems">
    <a :href="item.link">
      {{ item.title }}
    </a>
</div>

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

v-for="(item, index) in items"

Директива v-for похожа использованием forEach из JavaScript.

Можно сразу использовать свойства объекта для вставки в шаблон

<div v-for="{ title, link } in menuItems">
  <a :href="link">
 {{ title }}
  </a>
</div>

Можно использовать of вместо in в качестве разделителя в конструкции v-for.

v-for и объекты

v-for также можно использовать для обхода свойств объектов. Ниже самый полный пример использования

const myObject = reactive({
  title: 'Post Title',
  author: 'Petrovich',
  publishedAt: '2016-04-10'
})
<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>

v-for и диапазон чисел

v-for подходит для перебора диапазона чисел, счет начинается с 1

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

v-for может использоваться в тэге <template>

Взаимодействие v-for и v-if

Если обе директивы применить на одном элементе, то v-if будет иметь выше приоритет, чем v-for. Поэтому при таком использовании будет происходить ошибка. Для того, чтобы это избежать необходимо элемент с v-if обернуть тэгом <template> и уже в этом template использовать v-for.

Фиксация состояния с key

Чтобы зафиксировать состояние списка или объекта мы можем передавать специальный атрибут key вместе с директивой v-for, чтобы Vue не переопределил элементы или их порядок при изменениях.

v-for в компонентах

v-for в компонентах можно использовать также как в обычных элементах, не забывая про key.

<TestComponent v-for="item in items" :key="item.id" />

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

Определение изменений массива

Vue определяет, когда срабатывают методы для изменения массивов и делает обновления. Эти методы:

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

Есть методы, которые на первый взгляд тоже изменяют массивы, но на самом деле они из исходного массива создают новый. Тогда необходимо производить переназначение массива на новый.