Refreshing your Livewire components using event listeners

Refreshing your Livewire components using event listeners

Let's take a look at how we can refresh our component when events occur using the new #[On] attribute.

Starting with Livewire v3.4.0, you can use the #[On] attribute at the class level. In prior versions, you could only add this attribute to your class methods. In Livewire v2, a common pattern was to add listeners that would refresh your component, for example:

1class UsersOverview extends Component
2{
3 protected $listeners = [
4 'userDeleted' => '$refresh',
5 ];
6}

When a user got deleted, this would ensure your user overview got updated and that the removed user is no longer listed. In this new version, this has become even easier (v3.3.6). We can now use the #[On('userDeleted')] attribute to achieve the same result.

1#[On('userDeleted')]
2class UsersOverview extends Component
3{
4}
To navigate
Press Enter to select