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 ДОЛЖЕН быть объявлен в элементе <template>.

Осторожно

Этот элемент <template> ДОЛЖЕН содержать только один корневой элемент.

Ключи

Если вы собираетесь переупорядочивать элементы, важно указывать уникальные ключи для каждой итерации 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 в данном случае можно назвать как угодно.

Осторожно

Несмотря на отсутствие в приведённом выше фрагменте, x-for не может быть использована, если ни у одного из родительских элементов не указана директива x-data

Содержимое <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…

1.  <ul x-data="{ numbers: [1, 2, 3] }">
      <template x-for="number in numbers">
        <li x-text="number"></li>
      </template>
    </ul>

2.  <ul x-data="{ numbers: [1, 2, 3] }">
      <li x-for="number in numbers" x-text="number"></li>
    </ul>

3.  <ul x-data>
      <template x-for="(_, i) in 3">
        <li x-text="i + 1"></li>
      </template>
    </ul>

Отправить