x-for

Директива Alpine x-for позволяет создавать элементы DOM путём перебора списка. Вот простой пример её использования для создания списка цветов на основе массива.

<ul x-data="{ colors: ['Красный', 'Оранжевый', 'Жёлтый'] }">
  <template x-for="color in colors">
    <li x-text="color"></li>
  </template>
</ul>

Вы также можете передавать объекты в x-for.

<ul x-data="{ car: { make: 'Внедорожник', model: 'Grand Cherokee', color: 'чёрный' } }">
  <template x-for="(value, index) in car">
    <li><span x-text="index"></span>: <span x-text="value"></span></li>
  </template>
</ul>

В отношении x-for стоит отметить два правила:

Ключи

Если вы собираетесь переупорядочивать элементы, важно указывать уникальные ключи для каждой итерации x-for. Без динамических ключей Alpine может быть сложно отслеживать, что переупорядочивается, и это может вызвать странные побочные эффекты.

<ul
  x-data="{ colors: [
    { id: 1, label: 'Красный' },
    { id: 2, label: 'Оранжевый' },
    { id: 3, label: 'Жёлтый' },
  ]}"
>
  <template x-for="color in colors" :key="color.id">
    <li x-text="color.label"></li>
  </template>
</ul>

Теперь, если цвета добавляются, удаляются, переупорядочиваются или изменяются их идентификаторы, Alpine сохранит или уничтожит итерированные элементы <li> соответственно.

Доступ к индексам

Если вам нужно получить доступ к индексу каждого элемента в итерации, вы можете сделать это, используя синтаксис ([item], [index]) in [items] следующим образом:

<ul x-data="{ colors: ['Красный', 'Оранжевый', 'Жёлтый'] }">
  <template x-for="(color, index) in colors">
    <li>
      <span x-text="index + ': '"></span>
      <span x-text="color"></span>
    </li>
  </template>
</ul>

Вы также можете получить доступ к индексу внутри динамического выражения :key.

<template x-for="(color, index) in colors" :key="index"></template>

Итерация по диапазону

Если вам нужно просто выполнить цикл n раз, а не перебирать массив, Alpine предлагает сокращённый синтаксис.

<ul>
  <template x-for="i in 10">
    <li x-text="i"></li>
  </template>
</ul>

i в данном случае можно назвать как угодно.

Содержимое `<template>`

Как упоминалось выше, тег <template> должен содержать только один корневой элемент.

Например, следующий код не будет работать:

<div x-data="{ colors: ['Красный', 'Жёлтый', 'Оранжевый'] }">
  <template x-for="color in colors">
    <span>Следующий цвет: </span><span x-text="color"></span>
  </template>
</div>

А этот код заработает:

<div x-data="{ colors: ['Красный', 'Жёлтый', 'Оранжевый'] }">
  <template x-for="color in colors">
    <p>
      <span>Следующий цвет: </span><span x-text="color"></span>
    </p>
  </template>
</div>

Проверка знаний

Правильный вариант использования x-for…

Выберите все подходящие варианты.

Цикл по массиву внутри template
```
<ul x-data="{ numbers: [1, 2, 3] }">
  <template x-for="number in numbers">
    <li x-text="number"></li>
  </template>
</ul>
```
x-for объявлена на <template> с единственным корневым элементом внутри — оба правила соблюдены.
x-for прямо на элементе li
```
<ul x-data="{ numbers: [1, 2, 3] }">
  <li x-for="number in numbers" x-text="number"></li>
</ul>
```
Директиву нельзя объявлять прямо на элементе: x-for работает только на <template>.
Перебор диапазона с доступом к индексу
```
<ul x-data>
  <template x-for="(_, i) in 3">
    <li x-text="i + 1"></li>
  </template>
</ul>
```
Сокращённый синтаксис для диапазона тоже допустим, а x-data без значения задаёт нужную область видимости.

Прогресс викторины

0 / 0 вопросов отвечено (0%)

0 верно