x-id

x-id vous permet de déclarer une nouvelle « portée » pour tous les nouveaux identifiants générés avec $id(). Elle accepte un tableau de chaînes (des noms d'identifiants) et ajoute à chaque $id('...') généré dans cette portée un suffixe unique par rapport aux autres identifiants de la page.

x-id est conçue pour être utilisée conjointement avec la propriété magique $id(...).

Consultez la documentation de $id pour mieux comprendre cette fonctionnalité.

Voici un bref exemple d'utilisation de cette directive :

<div x-id="['text-input']">
    <label :for="$id('text-input')">Nom d'utilisateur</label>
    <!-- for="text-input-1" -->

    <input type="text" :id="$id('text-input')">
    <!-- id="text-input-1" -->
</div>

<div x-id="['text-input']">
    <label :for="$id('text-input')">Nom d'utilisateur</label>
    <!-- for="text-input-2" -->

    <input type="text" :id="$id('text-input')">
    <!-- id="text-input-2" -->
</div>

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

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