$refs

$refs est une propriété magique qui permet de récupérer les éléments DOM marqués avec x-ref à l'intérieur du composant. C'est utile lorsque vous devez manipuler manuellement des éléments DOM. On l'utilise souvent comme alternative plus concise et limitée au composant à document.querySelector.

<button @click="$refs.text.remove()">Supprimer le texte</button>

<span x-ref="text">Bonjour 👋</span>

Maintenant, lorsque vous appuyez sur le <button>, le <span> est supprimé.

Limitations

Dans la V2, il était possible de lier dynamiquement $refs à des éléments, comme ci-dessous :

<template x-for="item in items" :key="item.id" >
    <div :x-ref="item.name">
    du contenu ...
    </div>
</template>

Cependant, dans la V3, $refs n'est accessible que pour les éléments créés statiquement. Ainsi, dans l'exemple ci-dessus, si vous vous attendiez à ce que la valeur de item.name dans $refs soit par exemple Batteries, sachez que $refs contiendra en réalité la chaîne littérale 'item.name' et non Batteries.

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