I have a question about laravel livewire, when I change some property of my component, the front input binded to that property emits some event?
public function edit(Post $post)
{
$this->post = $post;
$this->start_date = $post->start_date;
}
I was thinking livewire dispatch the same event used to listen the front:
<input wire:model="start_date" type="date" id="dateId" />
<script wire:ignore>
document.addEventListener('livewire:load', function () {
$("#dateId").on('input', (event) => {
console.log(345);
});
});
</script>
But nothing.
Not immediately when you change a property inside PHP Livewire component the way you showed.
You would need to emit a browser event from Livewire Component and listen for it in the frontend as described in docs.
You can also try Global Livewire JavaScript Object: Livewire.on(eventName, (...params) => {})
But the easiest way to interact with Livewire is probably with Alpine.js.
According to the documentation for livewire 2.x, what you're looking could be one of these hooks. Maybe component.initialized, element.updating, element.updated or one of the messages.
| Hooks | Description |
|---|---|
component.initialized |
Called when a component has been initialized on the page by Livewire |
element.initialized |
Called when Livewire initializes an individual element |
element.updating |
Called before Livewire updates an element during its DOM-diffing cycle after a network roundtrip |
element.updated |
Called after Livewire updates an element during its DOM-diffing cycle after a network roundtrip |
element.removed |
Called after Livewire removes an element during its DOM-diffing cycle |
message.sent |
Called when a Livewire update triggers a message sent to the server via AJAX |
message.failed |
Called if the message send fails for some reason |
message.received |
Called when a message has finished its roudtrip, but before Livewire updates the DOM |
message.processed |
Called after Livewire processes all side effects (including DOM-diffing) from a message |
<script>
document.addEventListener("DOMContentLoaded", () => {
Livewire.hook('component.initialized', (component) => {})
Livewire.hook('element.initialized', (el, component) => {})
Livewire.hook('element.updating', (fromEl, toEl, component) => {})
Livewire.hook('element.updated', (el, component) => {})
Livewire.hook('element.removed', (el, component) => {})
Livewire.hook('message.sent', (message, component) => {})
Livewire.hook('message.failed', (message, component) => {})
Livewire.hook('message.received', (message, component) => {})
Livewire.hook('message.processed', (message, component) => {})
});
</script>