wire:submit

Livewire facilita el manejo del envío de formularios a través de la directiva wire:submit. Añadiendo wire:submit a un elemento <form>, Livewire interceptará el envío del formulario, evitará el manejo por defecto del navegador, y llamará a cualquier método del componente Livewire.

Este es un ejemplo básico del uso de wire:submit para manejar el envío de un formulario “Crear Publicación”:

<?php

namespace App\Livewire;

use Livewire\Component;
use App\Models\Publicacion;

class CrearPublicacion extends Component
{
    public $titulo = '';

    public $contenido = '';

    public function guardar()
    {
        Publicacion::create([
            'titulo' => $this->titulo,
            'contenido' => $this->contenido,
        ]);

        $this->redirect('/publicaciones');
    }

    public function render()
    {
        return view('livewire.create-post');
    }
}

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

    <textarea wire:model="contenido"></textarea>

    <button type="submit">Guardar Publicación</button>
</form>

En el ejemplo anterior, cuando un usuario envía el formulario haciendo clic en “Guardar Publicación”, wire:submit intercepta el evento submit y llama a la acción guardar() en el servidor.

Livewire llama automáticamente a preventDefault()

wire:submit es diferente de otros manejadores de eventos Livewire en que internamente llama a event.preventDefault() sin necesidad del modificador .prevent. Esto se debe a que hay muy pocos casos en los que estarías escuchando el evento submit y NO querrías prevenir su manejo por defecto por parte del navegador (realizar un envío completo del formulario a un endpoint).

Livewire desactiva automáticamente los formularios al enviarlos

Por defecto, cuando Livewire envía un formulario al servidor, desactiva los botones de envío y marca todas las entradas del formulario como readonly (de solo lectura). De esta forma, un usuario no puede enviar el mismo formulario de nuevo hasta que el envío inicial se haya completado.