wire:dirty

En una página HTML tradicional que contenga un formulario, éste sólo se envía cuando el usuario pulsa el botón “Enviar”.

Sin embargo, Livewire es capaz de mucho más que los formularios tradicionales. Puede validar las entradas del formulario en tiempo real o incluso guardar el formulario mientras el usuario teclea.

En estos escenarios de actualización “en tiempo real”, puede ser útil señalar a sus usuarios cuando un formulario o subconjunto de un formulario ha sido modificado, pero no ha sido guardado en la base de datos.

Cuando un formulario contiene entradas sin guardar, ese formulario se considera “sucio”. Sólo se convierte en “limpio” cuando una petición de red se ha disparado para sincronizar el estado del servidor con el estado del lado del cliente.

Uso básico

Livewire permite alternar fácilmente elementos visuales en la página utilizando la directiva wire:dirty.

Al añadir wire:dirty a un elemento, se está indicando a Livewire que sólo muestre el elemento cuando el estado del lado del cliente difiera del estado del lado del servidor.

Para demostrarlo, aquí hay un ejemplo de un formulario UpdatePost que contiene una indicación visual “Cambios no guardados…” que señala al usuario que el formulario contiene entradas que no han sido guardadas:

<form wire:submit="actualizar">
    <input type="text" wire:model="titulo">

    <!-- ... -->

    <button type="submit">Actualizar</button>

    <div wire:dirty>Cambios no guardados...</div>
</form>

Como se ha añadido wire:dirty al mensaje “Cambios no guardados…”, el mensaje estará oculto por defecto. Livewire mostrará automáticamente el mensaje cuando el usuario comience a modificar las entradas del formulario.

Cuando el usuario envíe el formulario, el mensaje desaparecerá de nuevo, ya que los datos del servidor / cliente vuelven a estar sincronizados.

Eliminación de elementos

Añadiendo el modificador .remove a wire:dirty, puedes mostrar un elemento por defecto y sólo ocultarlo cuando el componente tenga el estado “dirty”:

div wire:dirty.remove>Los datos están sincronizados...</div>

Actualizaciones de propiedades

Imagina que estás utilizando wire:model.blur para actualizar una propiedad en el servidor inmediatamente después de que un usuario abandone un campo de entrada. En este caso, puede proporcionar una indicación “dirty” sólo para esa propiedad añadiendo wire:target al elemento que contiene la directiva wire:dirty.

A continuación se muestra un ejemplo en el que sólo se muestra una indicación dirty cuando se ha modificado la propiedad title:

<form wire:submit="actualizar">
    <input wire:model.blur="titulo">

    <div wire:dirty wire:target="titulo">Título no guardado..</div>

    <button type="submit">Actualizar</button>
</form>

Conmutación de clases

A menudo, en lugar de alternar elementos enteros, es posible que desee alternar clases CSS individuales en una entrada cuando su estado es “sucio”.

A continuación se muestra un ejemplo en el que un usuario escribe en un campo de entrada y el borde se vuelve amarillo, lo que indica un estado “no guardado”. Luego, cuando el usuario se aleja del campo, el borde desaparece, indicando que el estado se ha guardado en el servidor:

<input wire:model.blur="titulo" wire:dirty.class="border-yellow-500">