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

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

Синтаксис

<input wire:keydown="methodName">

Можно указать модификатор для конкретной клавиши:

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

Также можно передать параметры в метод:

<input wire:keydown.enter="methodName('param')">

Пример

Давайте увеличим число $num при нажатии клавиши Enter в поле ввода:

<?php
	namespace App\Livewire;

	use Livewire\Component;

	class Counter extends Component
	{
		public $num = 0;

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

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

<div>
	<input type="text" wire:keydown.enter="inc">
	<p>Number: {{ $num }}</p>
</div>

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

<div>
	<input type="text">
	<p>Number: 1</p>
</div>

Пример

Передадим в метод параметр - шаг увеличения числа:

<?php
	namespace App\Livewire;

	use Livewire\Component;

	class Counter extends Component
	{
		public $num = 0;

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

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

<div>
	<input type="text" wire:keydown.enter="inc(5)">
	<p>Number: {{ $num }}</p>
</div>

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

<div>
	<input type="text">
	<p>Number: 5</p>
</div>

Пример

Обработаем нажатие клавиши Escape для очистки значения свойства:

<?php
	namespace App\Livewire;

	use Livewire\Component;

	class Search extends Component
	{
		public $query = '';

		public function clear()
		{
			$this->query = '';
		}

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

<div>
	<input type="text" wire:model="query" wire:keydown.escape="clear">
	<p>Current query: {{ $query }}</p>
</div>

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

<div>
	<input type="text">
	<p>Current query: </p>
</div>

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

директиву wire:keydown.enter,
которая реагирует только на нажатие клавиши Enter
директиву wire:keydown.escape,
которая реагирует на нажатие клавиши Escape
директиву wire:keyup,
которая вызывает метод при отпускании клавиши
директиву wire:change,
которая вызывает метод при изменении значения поля