Директива 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">Сохранить</button>
</form>

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

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

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

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

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

Углубленное изучение

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

• Реагирование на события браузера в Livewire
• Создание форм в Livewire

Смотрите также

• Формы — Обработка отправки форм в Livewire
• Действия — Обработка данных формы в действиях
• Валидация — Валидация форм перед отправкой

Справочник

wire:submit="имяМетода"
wire:submit="имяМетода(параметр1, параметр2)"

Модификаторы

Модификатор	Описание
.prevent	Предотвращает стандартное поведение браузера (автоматически для wire:submit)
.stop	Останавливает всплытие события
.self	Срабатывает только если событие возникло на этом элементе
.once	Гарантирует, что обработчик будет вызван только один раз
.debounce	Добавляет задержку обработчика на 250 мс (используйте .debounce.500ms для пользовательской длительности)
.throttle	Ограничивает обработчик до срабатывания не чаще чем каждые 250 мс (используйте .throttle.500ms для пользовательской длительности)
.window	Слушает событие на объекте window
.document	Слушает событие на объекте document
.passive	Не будет блокировать производительность прокрутки
.capture	Слушает во время фазы захвата
.renderless	Пропускает повторный рендеринг после завершения действия
.preserve-scroll	Сохраняет позицию прокрутки во время обновлений
.async	Выполняет действие параллельно вместо постановки в очередь