$nextTick

$nextTick est une propriété magique qui permet d'exécuter une expression donnée UNIQUEMENT APRÈS qu'Alpine a effectué ses mises à jour réactives du DOM. C'est utile lorsque vous voulez interagir avec l'état du DOM APRÈS qu'il a reflété les modifications de données que vous avez faites.

<div x-data="{ title: 'Bonjour' }">
    <button
        @click="
            title = 'Bonjour le monde !';
            $nextTick(() => { console.log($el.innerText) });
        "
        x-text="title"
    ></button>
</div>

Dans l'exemple ci-dessus, au lieu d'afficher « Bonjour » dans la console, c'est « Bonjour le monde ! » qui sera affiché, car $nextTick a permis d'attendre qu'Alpine ait fini de mettre à jour le DOM.

Promesses

$nextTick renvoie une promesse, ce qui permet de l'utiliser pour mettre en pause une fonction asynchrone jusqu'à ce que les mises à jour du DOM en attente soient terminées. Dans ce cas, $nextTick n'a pas besoin non plus qu'on lui passe un argument.

<div x-data="{ title: 'Bonjour' }">
    <button
        @click="
            title = 'Bonjour le monde !';
            await $nextTick();
            console.log($el.innerText);
        "
        x-text="title"
    ></button>
</div>

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