Livewire-Components mithilfe von Event-Listeners aktualisieren

Was ist Livewire: Stell dir vor, du könntest coole Single-Page-Apps zaubern, ganz ohne dich in externe JS-Frameworks wie Vue.js reinfuchsen zu müssen. Mit Laravel Livewire geht das! Das Ding ist ein Full-Stack-Framework, das wie Pech und Schwefel zu Laravel passt und dir hilft, flotte dynamische Benutzeroberflächen zu entwickeln, ohne dass du auf die Vorteile von Laravel verzichten musst.

Zum Feature: Schauen wir uns nun an, wie wir unser Component aktualisieren können, wenn Events auftreten, und zwar unter Verwendung des neuen #[On]-Attributs.

Ab Livewire Version 3.4.0 kannst du das #[On]-Attribut auf Klassenebene verwenden. In früheren Versionen konntest du dieses Attribut nur zu deinen Klassenmethoden hinzufügen. In Livewire Version 2 war es üblich, Listener hinzuzufügen, die deine Komponente aktualisieren würden, zum Beispiel:

class MonitorOverview extends Component
{
    protected $listeners = [
        'monitorDeleted' => 'refresh',
    ];
}

Wenn ein Monitor gelöscht wurde, würde dies sicherstellen, dass deine Übersicht aktualisiert wird und der entfernte Monitor nicht mehr aufgeführt ist. Mit der neuen Version ist dies noch einfacher geworden. Jetzt können wir das #[On(`monitorDeleted`)]-Attribut verwenden, um das gleiche Ergebnis zu erzielen.

class MonitorOverview extends Component
{
    #[On('monitorDeleted')]
    public function refresh() {}
}

Hey, hast du schon gehört, dass du jetzt in PHP Attribute definieren kannst? Das geht seit PHP 8 und ist echt eine coole Sache. Falls du Bock hast, mehr darüber zu lernen, check mal diesen Artikel aus. Der erklärt’s dir von A bis Z!