Livewire how to $emit event on select change (wire:model)
Stefan Izdrail
Founder & Senior Architect · 2026-06-29
Livewire how to $emit event on
<select> change (wire:model)
Livewire is a powerful framework for building interactive web applications with Laravel. It provides a clean and straightforward way to handle user interactions, including the management of forms and select elements. In this blog post, we will focus on how to trigger events using Livewire when a <select> changes its value (wire:model).
Firstly, let's understand wire:model. Wire:model is a directive used in Livewire views for automatically syncing the model properties with input values. It allows us to bind form fields directly to PHP class properties, making our application more responsive and user-friendly. In this case, we want to emit an event when the <select> changes its value.
To achieve this, first create a component that will be responsible for handling the update and emitting events. In your project folder, add the following code:
```php
['except' => ''],
];
public function mounted()
{
//
}
public function updatedHallId($name, $value)
{
$this->emit('hallChanged', $value);
}
public function render()
{
return view('livewire.show-reservation-form', [
'halls' => Hall::all(),
]);
}
public function getHallEventsProperty()
{
return Event::where('hall_id', $this->hall_id)->get();
}
}
```
In this code, we defined a Livewire component called 'ShowReservationForm'. We added the wire:model attribute 'hall_id' with an initial value of '' (empty string). We also overrode the default queryString to not include the 'hall_id' in the URL when the component is mounted. The updatedHallId method will emit an event named 'hallChanged' whenever the <select> updates its value, passing the new value as a parameter, which we can use in other components.
Next, let's create another component to handle the event and show relevant data:
```php
showTable = true;
}
}
```
In this example, we listen for the 'hallChanged' event emitted by the first component and set a property called '$showTable' to true. In your views, you can use this property to show relevant data or perform additional actions when the table is visible.
Finally, let's modify your HTML code to use wire:model and fire events on <select> change:
```html
```
When you select a value from the dropdown, the event 'hallChanged' will be emitted, and the component responsible for handling this event can access the selected value. In conclusion, using Livewire allows us to create interactive web applications with clean code and efficient data management. By understanding how to emit events on select change and implementing it in our application, we ensure a better user experience and improved responsiveness.