AlpineJS Skill: Iterating Over Data (`x-for`)

Basic Iteration: <template x-for="item in items" :key="item.id"><div>...</div></template>

This is the most common usage. items is an array in your Alpine component's data. For each item in items, the HTML content inside the <template> tag will be rendered. Each item variable is a reactive copy of the original data for that iteration.

<ul x-data="{ colors: [ {id: 1, name: 'Red'}, {id: 2, name: 'Green'} ] }">
  <template x-for="color in colors" :key="color.id">
    <li x-text="color.name"></li>
  </template>
</ul>

Iteration with Index: <template x-for="(item, index) in items" :key="index">...</div></template>

You can also get the current iteration's index (0-based). This is useful if you need to display the position or if your items don't have a unique ID (though using a unique ID from the data for :key is generally preferred if items can be reordered or removed).

<ul x-data="{ fruits: ['Apple', 'Banana', 'Cherry'] }">
  <template x-for="(fruit, index) in fruits" :key="index">
    <li>
      <span x-text="index + 1"></span>. <span x-text="fruit"></span>
    </li>
  </template>
</ul>

Iterating a Fixed Number of Times: x-for="i in 5"

AlpineJS can also loop a specific number of times. In this case, i will be a 1-based index (1, 2, 3, 4, 5).

<div x-data>
  <template x-for="i in 3" :key="i">
    <p>Iteration <span x-text="i"></span></p>
  </template>
</div>

Using :key: The :key attribute is crucial for performance and stability when AlpineJS renders lists, especially if the list items can be added, removed, or reordered. Alpine uses the key to identify each specific DOM element associated with an item in your array.

• It helps Alpine efficiently update only the changed elements instead of re-rendering the entire list.
• Keys must be unique among siblings in the loop.
• Ideally, use a unique ID property from your data items (e.g., item.id). If items lack unique IDs and won't be reordered or have items spliced from the middle, the iteration `index` can be used as a fallback, but this is less robust.

Forgetting :key or using a non-unique key: This is a common mistake. Without a proper, unique :key, AlpineJS might struggle to efficiently update and reorder elements. This can lead to state inconsistencies (e.g., focus being lost, incorrect component states) or performance degradation, especially with dynamic lists where items are added, removed, or reordered. Always use a unique ID from your data if available for the :key. If you must use the index, be aware of its limitations if the list order can change or items can be removed from anywhere but the end.

x-for must be on a <template> tag: Similar to the x-if directive, x-for must be placed on a <template> HTML tag. The <template> tag itself is not rendered in the DOM; its content is used as the blueprint for each item in the loop. Alpine clones this content for each iteration.

Trying to modify the iteration variable (item) directly to update the original array: The item variable you get inside an x-for loop (e.g., item in x-for="item in items") is a reactive copy for that specific iteration's scope. Modifying this item directly (e.g., item.name = 'New Name') will not mutate the original items array in your x-data. To change the data, you must modify the source array itself (e.g., this.items[index].name = 'New Name' or this.items.push(...)) typically within a method called via an event handler like x-on:click.