Директива wire:keydown.tab

Директива wire:keydown.tab вешается на HTML-элемент и вызывает указанный метод компонента при нажатии клавиши Tab. В значение передаётся имя публичного метода. После вызова Livewire обновляет шаблон компонента. Эта директива полезна для обработки навигации по полям ввода или выполнения действий при переходе между элементами формы.

Синтаксис

<input wire:keydown.tab="methodName">

Пример

Давайте увеличим число $num по нажатию Tab на поле ввода:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class Counter extends Component
	{
		public $num = 0;

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

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

<input wire:keydown.tab="inc">
<span>{{ $num }}</span>

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

<input>
<span>1</span>

Пример

Давайте передадим в метод параметр 5:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class Counter extends Component
	{
		public $num = 0;

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

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

<input wire:keydown.tab="inc(5)">
<span>{{ $num }}</span>

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

<input>
<span>5</span>

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

директиву wire:keydown,
которая вызывает метод при нажатии любой клавиши
директиву wire:keydown.enter,
которая обрабатывает нажатие клавиши Enter
директиву wire:click,
которая обрабатывает клик по элементу
директиву wire:model,
которая привязывает поле ввода к свойству компонента