wire:submit

Livewire упрощает обработку отправки форм с помощью директивы wire:submit. При добавлении wire:submit к элементу <form>, Livewire перехватывает отправку формы, предотвращает стандартное поведение браузера и вызывает любой метод компонента Livewire.

Вот базовый пример использования wire:submit для обработки отправки формы "Создать пост":

<?php
 
namespace App\Livewire;
 
use Livewire\Component;
use App\Models\Post;
 
class CreatePost extends Component
{
    public $title = '';
 
    public $content = '';
 
    public function save()
    {
        Post::create([
            'title' => $this->title,
            'content' => $this->content,
        ]);
 
        $this->redirect('/posts');
    }
 
    public function render()
    {
        return view('livewire.create-post');
    }
}
<form wire:submit="save"> 
    <input type="text" wire:model="title">
 
    <textarea wire:model="content"></textarea>
 
    <button type="submit">Save</button>
</form>

В приведённом выше примере, когда пользователь отправляет форму, нажимая "Сохранить", wire:submit перехватывает событие submit и вызывает действие save() на сервере.

Livewire автоматически вызывает preventDefault()

wire:submit отличается от других обработчиков событий Livewire тем, что он внутренне вызывает event.preventDefault() без необходимости добавления модификатора .prevent. Это связано с тем, что существует крайне мало ситуаций, в которых вы бы слушали событие submit и не хотели бы предотвращать его стандартное поведение в браузере (полную отправку формы на конечную точку).

Livewire автоматически отключает формы во время отправки

По умолчанию, когда Livewire отправляет форму на сервер, он отключает кнопки отправки формы и помечает все поля ввода как readonly. Таким образом, пользователь не сможет повторно отправить ту же форму до завершения первоначальной отправки.

1. Более глубокое погружение

wire:submit — это лишь один из множества слушателей событий, предоставляемых Livewire. Следующие две страницы содержат более подробную документацию по использованию wire:submit в вашем приложении: