UX Live Components (Partie 2)

Nous allons maintenant voir comment modifier un attribut présent côté serveur depuis l’interface du site. Il s’agira d’un compteur que l’on pourra incrémenter ou décrémenter.

Commençons par créer un nouveau composant :

symfony console make:twig-component Counter

Live Prop et Live Action

Dans la classe Counter, ajoutons le code suivant :

<?php

namespace App\Twig\Components;

use Symfony\UX\LiveComponent\Attribute\LiveProp;
use Symfony\UX\LiveComponent\Attribute\LiveAction;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;
use Symfony\UX\LiveComponent\DefaultActionTrait;

#[AsLiveComponent]
final class Counter
{
    use DefaultActionTrait;

    #[LiveProp]
    public int $count = 0;

    #[LiveAction]
    public function increment(): void {
        $this->count++;
    }

    #[LiveAction]
    public function decrement(): void {
        $this->count--;
    }

}

On ajoute l’attribut #[LiveProp] pour indiquer que la variable $count est modifiable via le composant (ligne 15).

Par défaut, Live Components fournit une action dynamique render qui permet de relancer l’affichage du composant sans rechargement de la page. Il est possible d’indiquer une méthode comme dynamique en ajoutant l’attribut #[LiveProp] avant sa déclaration (ligne 18 et 23).

Lancement des actions

Pour avoir accès aux méthodes déclarées dans le composant, nous allons créer deux boutons dans le fichier Counter.html.twig et ajouter les attributs de balise data-action et data-live-action-param de la manière suivante :

<div{{attributes}}>
	<p>Compteur :
		{{ count }}
    </p>
	<button 
        data-action="live#action" 
        data-live-action-param="decrement"
    >-</button>
	<button 
        data-action="live#action" 
        data-live-action-param="increment"
    >+</button>
</div>

Test du composant

Il ne reste plus qu’à ajouter le composant dans le fichier index.html.twig du dossier live_component.

<twig:Counter />

Vous pouvez tester le composant en cliquant sur les boutons + et -. Le compteur devrait se mettre à jour.