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

Директива wire:submit.prevent используется на HTML-элементе form и предотвращает стандартное поведение браузера при отправке формы (перезагрузку страницы). В значение передаётся имя публичного метода компонента, который будет вызван после отправки формы. Это эквивалентно совместному использованию директив wire:submit и .prevent.

Синтаксис

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

Пример

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

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class FormComponent extends Component
	{
		public $text = '';
		
		public function save()
		{
			// Имитация сохранения данных
			session()->flash('message', 'Сохранено: ' . $this->text);
		}
		
		public function render()
		{
			return view('livewire.form-component');
		}
	}
?>

<div>
	@if (session()->has('message'))
		<div>{{ session('message') }}</div>
	@endif
	
	<form wire:submit.prevent="save">
		<input type="text" wire:model="text">
		<button type="submit">Отправить</button>
	</form>
	
	<p>Текущий текст: {{ $text }}</p>
</div>

Результат выполнения кода:

<div>
	<form>
		<input type="text">
		<button type="submit">Отправить</button>
	</form>
	<p>Текущий текст: привет</p>
</div>

Пример

Давайте модифицируем пример, добавив валидацию данных перед сохранением:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use LivewireAttributesRule;
	
	class FormComponent extends Component
	{
		#[Rule('required|min:3')]
		public $text = '';
		
		public $message = '';
		
		public function save()
		{
			$this->validate();
			
			$this->message = 'Сохранено: ' . $this->text;
		}
		
		public function render()
		{
			return view('livewire.form-component');
		}
	}
?>

<div>
	@if ($message)
		<div>{{ $message }}</div>
	@endif
	
	<form wire:submit.prevent="save">
		<input type="text" wire:model="text">
		@error('text') <span>{{ $message }}</span> @enderror
		<button type="submit">Отправить</button>
	</form>
</div>

Результат выполнения кода:

<div>
	<form>
		<input type="text">
		<span>Поле text должно содержать не менее 3 символов.</span>
		<button type="submit">Отправить</button>
	</form>
</div>

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

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