x-init

La directive x-init vous permet de vous brancher sur la phase d'initialisation de n'importe quel élément dans Alpine.

<div x-init="console.log('Je m\'initialise !')"></div>

Dans l'exemple ci-dessus, « Je m'initialise ! » sera affiché dans la console avant que d'autres mises à jour du DOM n'aient lieu.

Voici un autre exemple où x-init sert à récupérer du JSON et à le stocker dans x-data avant que le composant ne soit traité.

<div
    x-data="{ posts: [] }"
    x-init="posts = await (await fetch('/posts')).json()"
>...</div>

$nextTick

Parfois, vous voulez attendre qu'Alpine ait complètement terminé son rendu avant d'exécuter du code.

C'est l'équivalent de useEffect(..., []) en React, ou de mount en Vue.

En utilisant la propriété magique interne $nextTick d'Alpine, vous pouvez y parvenir.

<div x-init="$nextTick(() => { ... })"></div>

x-init autonome

Vous pouvez ajouter x-init à n'importe quel élément, à l'intérieur ou à l'extérieur d'un bloc HTML x-data. Par exemple :

<div x-data>
    <span x-init="console.log('Je peux m\'initialiser')"></span>
</div>

<span x-init="console.log('Je peux aussi m\'initialiser')"></span>

Évaluation automatique de la méthode init()

Si l'objet x-data d'un composant contient une méthode init(), elle sera appelée automatiquement. Par exemple :

<div x-data="{
    init() {
        console.log('Je suis appelée automatiquement')
    }
}">
    ...
</div>

C'est également le cas pour les composants enregistrés avec la syntaxe Alpine.data().

Alpine.data('dropdown', () => ({
    init() {
        console.log('Je serai évaluée lors de l\'initialisation de chaque composant "dropdown".')
    },
}))

Si vous avez à la fois un objet x-data contenant une méthode init() et une directive x-init, la méthode de x-data sera appelée avant la directive.

<div
    x-data="{
        init() {
            console.log('Je suis appelée en premier')
        }
    }"
    x-init="console.log('Je suis appelée en second')"
    >
    ...
</div>

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