Funcionamiento de las peticiones para sincronizar propiedades y eventos en Laravel Livewire
Ahora vamos a conocer en detalle cómo funciona Livewire; cómo es posible que se puedan comunicar ambos lados (cliente y servidor) de una manera “directa” mediante eventos en Livewire.
Para este ejemplo, coloca de manera momentánea en tu formulario de categoría:
<label for="">Title</label>
<input type="text" wire:model.live='title'>Con el cual, cada vez que escribamos y no solamente cuando usamos un evento, se actualizará el estado de la propiedad $title.
Para esto, vamos a usar la consola de desarrolladores web del navegador y lo colocas en el apartado de “Network”.
Ahora, vamos a trabajar en el componente de Save.php y vamos escribiendo lentamente en cualquiera de los campos de texto wire:model, y veremos:
Si realizaste correctamente el ejercicio de escribir lentamente, notarás que se ejecuta una petición por cada letra que ingresas. Estas peticiones representan la forma en que Livewire mantiene sincronizadas las propiedades definidas en la clase del componente con los campos del formulario que utilizan la directiva wire:model.
En otras palabras, cada vez que el usuario modifica un campo en el cliente, Livewire envía una petición al servidor para actualizar el valor correspondiente en la propiedad del componente. Esta es la base de la reactividad de Livewire: mantener una relación actualizada entre el cliente y el servidor mediante pequeñas peticiones automáticas.
El comportamiento exacto —si las peticiones ocurren en cada letra, al perder el foco, o únicamente al presionar Enter— depende del tipo de directiva que estemos utilizando (wire:model, wire:model.lazy, wire:model.debounce, etc.).
Todas estas variaciones funcionan gracias al decorador @livewireScripts, que debemos incluir siempre que queramos utilizar Livewire. Este decorador carga el script principal de Livewire en el frontend y se encarga de administrar este sistema de sincronización y control de peticiones del cliente hacia el servidor.
Este decorador, junto con el de @livewireStyles lo tenemos definido por defecto en el Layout de layout/app.blade.php:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
***
@livewireStyles
***
@livewireScripts
</body>
</html>Para probar esto, quita el decorador de script e intenta emplear cualquier directiva de Livewire; por ejemplo, la de submit, y verás que ya no funciona.
El decorador de livewireScripts permite inicializar todos los scripts para permitir trabajar con Livewire desde el lado del cliente, y esto incluye, el envío de las actualizaciones del wire:model, eventos clicks, submits, etc; el livewireScripts renderiza algo como:
<script data-turbo-eval="false" data-turbolinks-eval="false" >
if (window.livewire) {
console.warn('Livewire: It looks like Livewire\'s @livewireScripts JavaScript assets have already been loaded. Make sure you aren\'t loading them twice.')
}
window.livewire = new Livewire();
window.livewire.devTools(true);
// ***
</script>Importante notar que, con Livewire activado, puedes usar el wire:model como si fuera una propiedad reactiva en Vue (esta afirmación la hacemos como una manera de entender cómo funciona Livewire, aunque es importante aclarar que Livewire no es reactivo); es decir, mediante la propiedad de $title, si la definimos en la vista del componente:
<div>
<form wire:submit.prevent="submit">
<label for="">Título</label>
<h3 class="text-xl">***{{$title}}***</h3>
<input type="text" wire:model="title">
<label for="">Texto</label>
<input type="text" wire:model="text">
<button type="submit">Enviar</button>
</form>
</div>Verás cuando escribas algo en el wire:model:
Aparece reflejado el contenido, y de esta forma puedes entender el funcionamiento básico de Livewire para tener actualizadas las propiedades, esta característica de actualización automática, es decir, cada vez que escribíamos en un campo, se actualizaba en el servidor en base una petición, era como funcionaba Livewire hasta la versión 2, en la versión 3 se desactivó esta función por defecto al hacer demasiadas peticiones al servidor innecesarias, ya que en la mayoría de los casos, vamos a querer actualizar los atributos es al ocurrir algún evento, como click o envío de un formulario.
Siguiente paso, implementar pruebas de Integración o Unitarias en Laravel Livewire.
Acepto recibir anuncios de interes sobre este Blog.
Haremos algunas pruebas desde Livewire enviando peticiones al momento de escribir en un wire:model y los eventos y ver la pestaña de network del navegador.