# v-for

## v-for

* **Принимает:** `Array | Object | number | string | Iterable`

Многократно отрисовывает элемент или блок шаблона, основываясь на переданных данных. Значение директивы должно следовать синтаксису `alias in expression` — в `alias` будет элемент текущей итерации:

```markup
<div v-for="item in items">
  {{ item.text }}
</div>
```

### Отображение массива элементов с помощью `v-for` <a href="#otobrazhenie-massiva-elementov-s-pomoshyu-v-for" id="otobrazhenie-massiva-elementov-s-pomoshyu-v-for"></a>

Директива `v-for`  используется для отрисовки списка элементов на основе массива данных. У директивы `v-for` особый синтаксис записи: `item in items`, где `items` — исходный массив, а `item` — **ссылка** на текущий элемент массива:

```markup
<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>
```

```javascript
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
```

Результат:

<div align="left"><img src="/files/-LwTp1BpZMXSLrLE-tnp" alt=""></div>

Внутри блока `v-for` доступны свойства из области видимости родителя. У `v-for` также есть второй опциональный параметр с индексом текущего элемента.

```markup
<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>
```

```javascript
var example2 = new Vue({
  el: '#example-2',
  data: {
    parentMessage: 'Родитель',
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
```

Результат:

<div align="left"><img src="/files/-LwTpQKMfZB0_yiGEtK-" alt=""></div>

Вместо `in` разделителем можно использовать `of`, как в итераторах JavaScript:

```markup
<div v-for="item of items"></div>
```

### `v-for` для объекта

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

```markup
<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>
```

```javascript
new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})
```

Результат:

<div align="left"><img src="/files/-LwTpuNUUjtC-yJa8_Jf" alt=""></div>

Можно использовать второй аргумент для получения имени свойства (ключа объекта):

```javascript
<div v-for="(value, name) in object">
  {{ name }}: {{ value }}
</div>
```

Результат:

<div align="left"><img src="/files/-LwTq523iuJx3gUJCexO" alt=""></div>

И третий — для индексов:

```markup
<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>
```

Результат:

<div align="left"><img src="/files/-LwTqGZR4sF2vIC9irPg" alt=""></div>

{% hint style="info" %}
При итерировании по объекту порядок обхода такой же как и в `Object.keys()`. Его консистентность **не гарантируется** при использовании различных реализаций движков JavaScript.
{% endhint %}

## `v-for` и диапазоны

В `v-for` можно передать целое число. В этом случае шаблон будет повторён указанное число раз.

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

Результат:

<div align="left"><img src="/files/-LwTtpQ1JNwQjepk3jWk" alt=""></div>

## `v-for` и тег `template`

Подобно использованию с `v-if`, также можно использовать тег `<template>` с директивой `v-for` для отображения блока из нескольких элементов.

```markup
<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>
```

## Компоненты и `v-for`

Можно использовать `v-for` на компонентах, как и на обычных элементах:

```markup
<my-component v-for="item in items" :key="item.id"></my-component>
```

{% hint style="info" %}
В версиях 2.2.0+, при использовании v-for на компонентах теперь обязательно требуется указывать key
{% endhint %}

Однако, в компонент никакие данные не передаются автоматически, поскольку у компонентов изолированные области видимости. Для передачи итерируемых данных в компонент необходимо явно использовать входные параметры:

```markup
<my-component
  v-for="(item, index) in items"
  :item="item"
  :index="index"
  :key="item.id"
></my-component>
```

Причина, почему `item` не передаётся в компонент автоматически, в том, что это сделает компонент жёстко связанным с логикой работы `v-for`. Но если указывать источник данных явно, компонент можно будет использовать и в других ситуациях.

## `v-for` и `v-if`

**Не рекомендуется** использовать вместе `v-if` и `v-for`.&#x20;

Когда присутствуют вместе на одном элементе, `v-for` имеет больший приоритет, чем `v-if`. Поэтому `v-if` будет выполняться для каждой итерации цикла. Это полезно, когда нужно отобразить только *некоторые* элементы списка, например:

```markup
<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>
```

В результате будут отображены только задачи, которые ещё не выполнены.

Если необходимо по условию пропускать выполнение всего цикла, переместите `v-if` на внешний элемент (или на `<template>`). Например:

```markup
<ul v-if="shouldRenderTodos">
  <li v-for="todo in todos">
    {{ todo }}
  </li>
</ul>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://d-ukolov.gitbook.io/vue/basics/cikly/v-for.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.