hay una manera de escuchar los ganchos del ciclo de vida de laravel livewire ? por ejemplo...
en php es:
public function updatedFoo($value) { // } ¿Cómo puede ser en js (sé que use @this generar el buscador de identificación)?
window.Livewire.find('componentIdGenerated').on('updatedFoo', function(value) { // });¡muchas gracias!
Es posible y realmente genial. Como dice la documentación, hay ganchos de JavaScript relacionados como
<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>Digamos que haces una llamada a algún método y al usarlo puedes obtener enlaces de mensajes y realizar las operaciones adecuadas.
<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>también puedes escuchar cuando ocurre un evento y hacer lo mismo
<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>¡Espero que puedas explotar esto más y mostrarnos cómo te va! ;-)
gracias a @Prospero por dar los primeros pasos y la idea general del código necesario
primero necesitamos guardar el estado inicial de nuestra propiedad (en mi caso es un componente modal, la identificación es dinámica):
Las variables entre paréntesis son variables de hoja)
... @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>luego, con los ganchos de livewire, debe escuchar el evento element.updated y comparar el estado inicial con el nuevo estado de la propiedad livewire
solo uso comparaciones condicionales, vi que puedes usar Proxy para código limpio:
<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>Lo uso para abrir un componente de componente de hoja modal de arranque.