Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

302
Vistas
Listen the laravel livewire lifecycle hooks in js

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!

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

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! ;-)

about 4 years ago · Juan Pablo Isaza Denunciar

0

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.

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda