Директива wire:submit

Директива wire:submit вешается на HTML-элемент form и вызывает указанный метод компонента при отправке формы. В значение передаётся имя публичного метода. Директива автоматически предотвращает стандартную перезагрузку страницы и отправляет данные формы через AJAX-запрос. После вызова метода Livewire обновляет шаблон компонента.

Синтаксис

<form wire:submit="methodName">
	<!-- поля формы -->
	<button type="submit">Отправить</button>
</form>

Пример

Давайте создадим простую форму с одним полем ввода. При отправке формы будем выводить введённый текст на экран:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class FormDemo extends Component
	{
		public $text = '';

		public function submitForm()
		{
			// Метод вызывается при отправке формы
		}

		public function render()
		{
			return view('livewire.form-demo');
		}
	}
?>

<form wire:submit="submitForm">
	<input type="text" wire:model="text">
	<button type="submit">Отправить</button>
</form>
<p>Введено: {{ $text }}</p>

Пример

Давайте добавим валидацию данных в методе компонента. Если данные не прошли проверку, Livewire автоматически отобразит ошибки:

<?php
	namespace AppLivewire;

	use LivewireComponent;
	use IlluminateValidationValidationException;

	class FormDemo extends Component
	{
		public $name = '';
		public $email = '';

		public function submitForm()
		{
			$this->validate([
				'name' => 'required|min:3',
				'email' => 'required|email',
			]);

			// Данные прошли валидацию
			session()->flash('success', 'Форма успешно отправлена!');
		}

		public function render()
		{
			return view('livewire.form-demo');
		}
	}
?>

<form wire:submit="submitForm">
	<div>
		<input type="text" wire:model="name" placeholder="Имя">
		@error('name') <span>{{ $message }}</span> @enderror
	</div>
	<div>
		<input type="email" wire:model="email" placeholder="Email">
		@error('email') <span>{{ $message }}</span> @enderror
	</div>
	<button type="submit">Отправить</button>
</form>
@if (session('success'))
	<p>{{ session('success') }}</p>
@endif

Пример

Метод компонента может принимать параметры из формы. Давайте передадим дополнительный параметр в метод:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class FormDemo extends Component
	{
		public $userId = 5;
		public $message = '';

		public function submitForm($id)
		{
			$this->message = "Форма отправлена для пользователя №{$id}";
		}

		public function render()
		{
			return view('livewire.form-demo');
		}
	}
?>

<form wire:submit="submitForm({{ $userId }})">
	<input type="text" wire:model="message">
	<button type="submit">Отправить для пользователя {{ $userId }}</button>
</form>
<p>{{ $message }}</p>

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

директиву wire:submit.prevent,
которая дополнительно предотвращает действие браузера по умолчанию
директиву wire:submit.self,
которая обрабатывает отправку только при клике по самой форме
директиву wire:model,
которая привязывает поле ввода к свойству компонента
директиву wire:click,
которая вызывает метод при клике на элемент