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

Директива wire:submit.self вешается на HTML-элемент формы и вызывает указанный метод компонента при отправке формы. В значение передаётся имя публичного метода. Модификатор .self гарантирует, что метод будет вызван только в том случае, если событие отправки произошло непосредственно на самой форме, а не на её дочерних элементах, таких как кнопки или поля ввода. Это полезно, когда нужно избежать множественных вызовов метода при вложенных формах или при обработке событий от дочерних элементов.

Синтаксис

<form wire:submit.self="methodName">
	<!-- поля формы -->
</form>

Пример

Давайте создадим компонент, который обрабатывает отправку формы, используя директиву wire:submit.self. Компонент будет увеличивать счетчик при отправке формы.

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class Counter extends Component
	{
		public $num = 0;

		public function submitForm()
		{
			$this->num++;
		}

		public function render()
		{
			return view('livewire.counter');
		}
	}
?>

<form wire:submit.self="submitForm">
	<button type="submit">
		Submit
	</button>
</form>
<span>
	{{ $num }}
</span>

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

<form>
	<button type="submit">
		Submit
	</button>
</form>
<span>
	1
</span>

Пример

Давайте передадим в метод параметр, используя свойство компонента:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class Counter extends Component
	{
		public $num = 0;
		public $step = 2;

		public function submitForm()
		{
			$this->num += $this->step;
		}

		public function render()
		{
			return view('livewire.counter');
		}
	}
?>

<form wire:submit.self="submitForm">
	<button type="submit">
		Submit
	</button>
</form>
<span>
	{{ $num }}
</span>

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

<form>
	<button type="submit">
		Submit
	</button>
</form>
<span>
	2
</span>

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

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