$watch

Vous pouvez « observer » une propriété d'un composant avec la méthode magique $watch. Par exemple :

<div x-data="{ open: false }" x-init="$watch('open', value => console.log(value))">
    <button @click="open = ! open">Basculer open</button>
</div>

Dans l'exemple ci-dessus, lorsque le bouton est pressé et que open change, la fonction de rappel fournie se déclenche et affiche la nouvelle valeur avec console.log :

Vous pouvez observer des propriétés profondément imbriquées grâce à la notation pointée :

<div x-data="{ foo: { bar: 'baz' }}" x-init="$watch('foo.bar', value => console.log(value))">
    <button @click="foo.bar = 'bob'">Modifier</button>
</div>

Lorsque le <button> est pressé, foo.bar prend la valeur « bob » et « bob » s'affiche dans la console.

Obtenir l'« ancienne » valeur

$watch garde en mémoire la valeur précédente de la propriété observée. Vous pouvez y accéder grâce au second argument facultatif de la fonction de rappel, comme ceci :

<div x-data="{ open: false }" x-init="$watch('open', (value, oldValue) => console.log(value, oldValue))">
    <button @click="open = ! open">Basculer open</button>
</div>

Observation en profondeur

$watch surveille automatiquement les changements à tous les niveaux, mais gardez à l'esprit que, lorsqu'un changement est détecté, l'observateur renvoie la valeur de la propriété observée, et non celle de la sous-propriété qui a changé.

<div x-data="{ foo: { bar: 'baz' }}" x-init="$watch('foo', (value, oldValue) => console.log(value, oldValue))">
    <button @click="foo.bar = 'bob'">Mettre à jour</button>
</div>

Lorsque le <button> est pressé, foo.bar prend la valeur « bob » et « {bar: 'bob'} {bar: 'baz'} » s'affiche dans la console (nouvelle et ancienne valeur).

Remarque : ⚠️ Modifier une propriété d'un objet « observé » comme effet de bord de la fonction de rappel de $watch génère une boucle infinie et finit par provoquer une erreur.

<!-- 🚫 Boucle infinie -->
<div x-data="{ foo: { bar: 'baz', bob: 'lob' }}" x-init="$watch('foo', value => foo.bob = foo.bar)">
    <button @click="foo.bar = 'bob'">Mettre à jour</button>
</div>

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