$data

$data est une propriété magique qui donne accès à la portée de données Alpine courante (généralement fournie par x-data).

La plupart du temps, vous pouvez accéder directement aux données Alpine dans les expressions. Par exemple, x-data="{ message: 'Bonjour Caleb !' }" vous permet d'écrire x-text="message".

Cependant, il est parfois utile de disposer d'un véritable objet qui encapsule toute la portée et que l'on peut transmettre à d'autres fonctions :

<div x-data="{ greeting: 'Bonjour' }">
    <div x-data="{ name: 'Caleb' }">
        <button @click="sayHello($data)">Dire bonjour</button>
    </div>
</div>

<script>
    function sayHello({ greeting, name }) {
        alert(greeting + ' ' + name + ' !')
    }
</script>

Maintenant, lorsque vous appuyez sur le bouton, le navigateur affiche l'alerte Bonjour Caleb !, car il a reçu un objet de données contenant toute la portée Alpine de l'expression qui l'a appelé (@click="...").

La plupart des applications n'auront pas besoin de cette propriété magique, mais elle peut être très utile pour des utilitaires Alpine plus poussés et plus complexes.

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