Does Laravel Livewire dispatch js events when change some property?

Question

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.

IGP · Accepted Answer · 2022-02-19 00:23:48Z

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>

Dave · Accepted Answer · 2022-02-19 15:11:57Z

1

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.

edited Feb 19, 2022 at 15:11

answered Feb 19, 2022 at 14:57

Dave

2,8822 gold badges24 silver badges42 bronze badges

Collectives™ on Stack Overflow

Does Laravel Livewire dispatch js events when change some property?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related