x-for

La directive x-for d'Alpine vous permet de créer des éléments du DOM en parcourant une liste. Voici un exemple simple qui crée une liste de couleurs à partir d'un tableau.

<ul x-data="{ colors: ['Rouge', 'Orange', 'Jaune'] }">
    <template x-for="color in colors">
        <li x-text="color"></li>
    </template>
</ul>

Vous pouvez aussi passer des objets à x-for.

<ul x-data="{ car: { make: 'Jeep', model: 'Grand Cherokee', color: 'Noir' } }">
    <template x-for="(value, index) in car">
        <li>
            <span x-text="index"></span> : <span x-text="value"></span>
        </li>
    </template>
</ul>

Deux règles sont à retenir à propos de x-for :

Remarque : x-for DOIT être déclaré sur un élément <template>. Cet élément <template> DOIT ne contenir qu'un seul élément racine.

Clés

Il est important de spécifier une clé unique pour chaque itération de x-for si vous comptez réordonner les éléments. Sans clés dynamiques, Alpine peut avoir du mal à suivre les réorganisations, ce qui provoque des effets de bord étranges.

<ul x-data="{ colors: [
    { id: 1, label: 'Rouge' },
    { id: 2, label: 'Orange' },
    { id: 3, label: 'Jaune' },
]}">
    <template x-for="color in colors" :key="color.id">
        <li x-text="color.label"></li>
    </template>
</ul>

Désormais, si des couleurs sont ajoutées, supprimées, réordonnées, ou si leurs « id » changent, Alpine conservera ou détruira les éléments <li> itérés en conséquence.

Accéder aux index

Si vous avez besoin d'accéder à l'index de chaque élément de l'itération, vous pouvez utiliser la syntaxe ([élément], [index]) in [éléments] comme ceci :

<ul x-data="{ colors: ['Rouge', 'Orange', 'Jaune'] }">
    <template x-for="(color, index) in colors">
        <li>
            <span x-text="index + ' : '"></span>
            <span x-text="color"></span>
        </li>
    </template>
</ul>

Vous pouvez aussi accéder à l'index à l'intérieur d'une expression :key dynamique.

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

Itérer sur un intervalle

Si vous voulez simplement boucler n fois, plutôt que parcourir un tableau, Alpine propose une syntaxe courte.

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

Ici, i peut porter le nom que vous voulez.

Remarque : bien que cela ne figure pas dans l'extrait ci-dessus, x-for ne peut pas être utilisé si aucun élément parent ne définit x-data. → En savoir plus sur x-data

Contenu d'un <template>

Comme indiqué plus haut, une balise <template> ne doit contenir qu'un seul élément racine.

Par exemple, le code suivant ne fonctionnera pas :

<template x-for="color in colors">
    <span>La couleur suivante est </span><span x-text="color">
</template>

mais ce code fonctionnera :

<template x-for="color in colors">
    <p>
        <span>La couleur suivante est </span><span x-text="color">
    </p>
</template>

Traduction française de la documentation officielle d'Alpine.js (licence MIT) – https://alpinejs.dev