Listen the laravel livewire lifecycle hooks in js

user_13255216 0
Viewed 1303

there is a way to listen the laravel livewire lifecycle hooks? for example...

in php is:

 public function updatedFoo($value)
 {
    //
 }

how it can be in js (i know use @this generate the id finder)?

window.Livewire.find('componentIdGenerated').on('updatedFoo', function(value) {
   //
});

thanks a lot!

laravel-livewire laravel dom php javascript
2 Answers

It's possible and really cool. As the documentation tells, there is JavaScript hooks related like

<script>
    document.addEventListener("DOMContentLoaded", () => {
        ....
        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>

Let's say, you make some call to some method and using this you can get messages hooks and do proper operations

<script>
    document.addEventListener("DOMContentLoaded", () => {
       Livewire.hook('message.sent', (message,component) => {
          if (message.updateQueue[0].payload.method === 'openModal') {
             // message was sent 
          }
       Livewire.hook('message.received', (message,component) => {
          if (message.updateQueue[0].payload.method === 'openModal') {
             // message was received 
          }
       // and go on!
</script>

also you can listen when an event occurs and do the same

<script>
    document.addEventListener("DOMContentLoaded", () => {
       Livewire.hook('message.sent', (message,component) => {
          if (message.updateQueue[0].payload.event === 'someDispatchedEvent') {
             // message was sent 
          }
       Livewire.hook('message.received', (message,component) => {
          if (message.updateQueue[0].payload.event === 'someDispatchedEvent') {
             // message was received 
          }
       // and go on!
</script>

hope you can exploit this more and show us how you go! ;-)

user_148806560

thanks to @Prospero for give the first steps and the general idea about the necesary code

first we need to save the initial state of our property (in my case is a modal component, the id is dynamic):

The variables in brackets are blade variables)

...
@php
$id = $id ?? \Illuminate\Support\Str::random(15);
$model = $attributes->wire('model')->value()
@endphp
...

<script wire:ignore>
   var model{{ $id }};

   document.addEventListener("livewire:load", function(event) {
         model{{ $id }} = @this.{{ $model }};
   });
</script>

then, with the livewire hooks, you have to listen the element.updated event, and compare the initial state with the new state of the livewire property

i use only conditional comparisons, i saw you can use Proxy for clean code:

<script wire:ignore>
  document.addEventListener("DOMContentLoaded", () => {

      Livewire.hook('element.updated', (el, component) => {
          if(model{{ $id }} && !@this.{{ $model }})
              new bootstrap.Modal(document.getElementById('{{ $id }}')).hide();

          if(!model{{ $id }} && @this.{{ $model }})
              new bootstrap.Modal(document.getElementById('{{ $id }}')).show();

          model{{ $id }} = @this.{{ $model }};
      });
  });
</script>

I use this for open a bootstrap modal blade component component.

user_132552160
Related