wire:model

Livewire facilita la vinculación del valor de una propiedad del componente con las inputs del formulario utilizando wire:model.

A continuación se muestra un ejemplo sencillo del uso de wire:model para vincular las propiedades $title y $content con inputs de formulario en un componente “Create Post”:

use Livewire\Component;
use App\Models\Post;

class CreatePost extends Component
{
    public $title = '';

    public $content = '';

    public function save()
    {
        $post = Post::create([
            'title' => $this->title
            'content' => $this->content
        ]);

        // ...
    }
}

<form wire:submit="save">
    <label>
        <span>Title</span>

        <input type="text" wire:model="title">
    </label>

    <label>
        <span>Content</span>

        <textarea wire:model="content"></textarea>
    </label>

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

Como ambas entradas utilizan wire:model, sus valores se sincronizarán con las propiedades del servidor cuando se pulse el botón “Guardar”.

“¿Por qué no se actualiza mi componente en directo mientras escribo?”.

Si ha probado esto en su navegador y no sabe por qué el título no se actualiza automáticamente, es porque Livewire sólo actualiza un componente cuando se envía una “acción”, como pulsar un botón de envío, no cuando un usuario escribe en un campo. Esto reduce las peticiones de red y mejora el rendimiento. Para habilitar la actualización “en vivo” cuando un usuario escribe, puede utilizar wire:model.live en su lugar. Más información sobre la vinculación de datos.

Personalización del tiempo de actualización

Por defecto, Livewire sólo enviará una petición de red cuando se realice una acción (como wire:click o wire:submit), NO cuando se actualice una entrada wire:model.

Esto mejora drásticamente el rendimiento de Livewire al reducir las peticiones de red y proporciona una experiencia más fluida a sus usuarios.

Sin embargo, hay ocasiones en las que puede querer actualizar el servidor con más frecuencia para cosas como la validación en tiempo real.

Actualización en vivo

Para enviar actualizaciones de propiedades al servidor cuando un usuario escribe en un campo de entrada, puede añadir el modificador .live a wire:model:

<input type="text" wire:model.live="title">

Personalizando el debounce

Por defecto, cuando se usa wire:model.live, Livewire añade un debounce de 150 milisegundos a las actualizaciones del servidor. Esto significa que si un usuario está tecleando continuamente, Livewire esperará hasta que el usuario deje de teclear durante 150 milisegundos antes de enviar una petición.

Puede personalizar este tiempo añadiendo .debounce.Xms a la entrada. Aquí hay un ejemplo de cambiar el debounce a 250 milisegundos:

<input type="text" wire:model.live.debounce.250ms="title">

Actualización en el evento “blur”

Añadiendo el modificador .blur, Livewire sólo enviará peticiones de red con actualizaciones de propiedades cuando un usuario haga clic fuera de una entrada, o pulse la tecla tab para pasar a la siguiente entrada.

Añadir .blur es útil para escenarios en los que se desea actualizar el servidor más frecuentemente, pero no a medida que un usuario teclea. Por ejemplo, la validación en tiempo real es un caso común donde .blur es útil.

input type="text" wire:model.blur="title">

Actualización en el evento “change”

Hay ocasiones en las que el comportamiento de .blur no es exactamente lo que quieres y en cambio sí lo es .change.

Por ejemplo, si desea ejecutar la validación cada vez que se cambia una entrada de selección, añadiendo .change, Livewire enviará una petición de red y validará la propiedad tan pronto como el usuario seleccione una nueva opción. A diferencia de .blur, que sólo actualizará el servidor después de que el usuario abandone la selección.

<select wire:model.change="title">
    <!-- ... -->
</select>

Cualquier cambio realizado en la entrada de texto se sincronizará automáticamente con la propiedad $title de su componente Livewire.

Todos los modificadores disponibles

Modificador	Descripción
.live	Envía actualizaciones a medida que el usuario escribe
.blur	Sólo envía actualizaciones en el evento blur
.change	Sólo envía actualizaciones en el evento change
.lazy	Alias de .change
.debounce.[?]ms	Anula el envío de actualizaciones con el intervalo de milisegundos especificado
.throttle.[?]ms	Acelera las actualizaciones de las solicitudes de red en el intervalo de milisegundos especificado
.number	Convierte el valor de texto de una entrada en int en el servidor
.boolean	Convierte el valor de texto de una entrada en bool en el servidor
.fill	Utiliza el valor inicial proporcionado por un atributo HTML “value” al cargar la página.

Campos de entrada

Livewire soporta la mayoría de los elementos de entrada nativos. Esto significa que deberías ser capaz de adjuntar wire:model a cualquier elemento de entrada en el navegador y vincular fácilmente propiedades a ellos.

Aquí hay una lista completa de los diferentes tipos de entrada disponibles y cómo utilizarlos en un contexto Livewire.

Text inputs

En primer lugar, las entradas de texto son la base de la mayoría de los formularios. He aquí cómo enlazar una propiedad llamada “title” a una de ellas:

<input type="text" wire:model="title">

Textarea inputs

Los elementos de textarea son igualmente sencillos. Basta con añadir wire:model a un textarea y el valor se vinculará:

<textarea type="text" wire:model="content"></textarea>

Si el valor “content” se inicializa con una cadena, Livewire rellenará el textarea con ese valor - no hay necesidad de hacer algo como lo siguiente:

<!-- Advertencia: Este fragmento demuestra lo que NO se debe hacer... -->

<textarea type="text" wire:model="content">{{ $content }}</textarea>

Checkboxes

Los Checkboxes pueden utilizarse para valores individuales, como cuando se conmuta una propiedad booleana. O bien, los Checkboxes se pueden utilizar para alternar un único valor en un grupo de valores relacionados. Discutiremos ambos escenarios:

Único Checkbox

Al final de un formulario de registro, puede tener una casilla de verificación que permita al usuario optar por recibir actualizaciones por correo electrónico. Puede llamar a esta propiedad $receiveUpdates. Puedes vincular fácilmente este valor a la casilla de verificación utilizando wire:model:

<input type="checkbox" wire:model="receiveUpdates">

Ahora, cuando el valor de $receiveUpdates sea false, la casilla estará desmarcada. Por supuesto, cuando el valor sea verdadero, la casilla estará marcada.

Multiples checkboxes

Ahora, digamos que además de permitir al usuario decidir recibir actualizaciones, tienes una propiedad array en tu clase llamada $updateTypes, permitiendo al usuario elegir entre una variedad de tipos de actualización:

public $updateTypes = [];

Al vincular varias casillas de verificación a la propiedad $updateTypes, el usuario puede seleccionar varios tipos de actualización y se añadirán a la propiedad array de $updateTypes:

<input type="checkbox" value="email" wire:model="updateTypes">
<input type="checkbox" value="sms" wire:model="updateTypes">
<input type="checkbox" value="notification" wire:model="updateTypes">

Por ejemplo, si el usuario marca las dos primeras casillas pero no la tercera, el valor de $updateTypes será: ["email", "sms"]

Radio Buttons

Para alternar entre dos valores diferentes para una misma propiedad, puede utilizar botones de radio:

<input type="radio" value="yes" wire:model="receiveUpdates">
<input type="radio" value="no" wire:model="receiveUpdates">

Desplegables

Livewire simplifica el trabajo con los desplegables <select>. Al añadir wire:model a un desplegable, el valor actualmente seleccionado se vinculará al nombre de propiedad proporcionado y viceversa.

Además, no hay necesidad de añadir manualmente selected a la opción que será seleccionada - Livewire se encarga de ello automáticamente.

A continuación se muestra un ejemplo de un desplegable de selección rellenado con una lista estática de estados:

<select wire:model="state">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    ...
</select>

Cuando se selecciona un estado específico, por ejemplo, “Alaska”, la propiedad $state del componente se establecerá en AK. Si prefiere que el valor sea “Alaska” en lugar de “AK”, puede omitir por completo el atributo value="" del elemento <option>.

A menudo, puede construir sus opciones desplegables dinámicamente utilizando Blade:

<select wire:model="state">
    @foreach (\App\Models\State::all() as $state)
        <option value="{{ $state->id }}">{{ $state->label }}</option>
    @endforeach
</select>

Si no tiene una opción específica seleccionada por defecto, puede mostrar una opción de placeholder silenciada por defecto, como “Seleccionar un estado”:

<select wire:model="state">
    <option disabled value="">Seleccionar un estado...</option>

    @foreach (\App\Models\State::all() as $state)
        <option value="{{ $state->id }}">{{ $state->label }}</option>
    @endforeach
</select>

Como puede ver, no existe un atributo “placeholder” para un menú de selección como en el caso de las entradas de texto. En su lugar, tienes que añadir un elemento de opción disabled como primera opción de la lista.

Desplegables de selección dependientes

A veces puede querer que un menú de selección dependa de otro. Por ejemplo, una lista de ciudades que cambia en función del estado seleccionado.

En la mayoría de los casos, esto funciona como cabría esperar, sin embargo, hay un problema importante: debe añadir una wire:key a la selección cambiante para que Livewire actualice correctamente su valor cuando cambien las opciones.

Este es un ejemplo de dos selecciones, una para estados y otra para ciudades. Cuando la selección de estado cambie, las opciones de la selección de ciudad cambiarán correctamente:

<!-- Menú para seleccionar estado -->
<select wire:model.live="selectedState">
    @foreach (State::all() as $state)
        <option value="{{ $state->id }}">{{ $state->label }}</option>
    @endforeach
</select>

<!-- Desplegable de ciudades a partir de un estado -->
<select wire:model.live="selectedCity" wire:key="{{ $selectedState }}">
    @foreach (City::whereStateId($selectedState->id)->get() as $city)
        <option value="{{ $city->id }}">{{ $city->label }}</option>
    @endforeach
</select>

De nuevo, lo único no estándar aquí es el wire:key que se ha añadido al segundo select. Esto asegura que cuando el estado cambie, el valor “selectedCity” se restablecerá correctamente.

Menús desplegables de selección múltiple

Si está utilizando un menú de selección “múltiple”, Livewire funciona como se espera. En este ejemplo, los estados se añadirán a la propiedad $states array cuando se seleccionen y se eliminarán si se deseleccionan:

<select wire:model="states" multiple>
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    ...
</select>

Profundizando más

Para una documentación más completa sobre el uso de wire:model en el contexto de los formularios HTML, visite la página de documentación de formularios Livewire.