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

Директива wire:keyup вешается на поле ввода и вызывает указанный метод компонента при отпускании клавиши внутри этого поля. В значение передаётся имя публичного метода. После вызова Livewire обновляет шаблон компонента.

Синтаксис

<input type="text" wire:keyup="methodName">

Пример

Давайте при отпускании клавиши в поле ввода будем выводить введённый текст:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Search extends Component
	{
		public $text = '';
		public $result = '';
		
		public function search()
		{
			$this->result = $this->text;
		}
		
		public function render()
		{
			return view('livewire.search');
		}
	}
?>

<div>
	<input type="text" wire:keyup="search" wire:model="text">
	<p>Result: {{ $result }}</p>
</div>

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

<div>
	<input type="text" wire:keyup="search" wire:model="text">
	<p>Result: abcde</p>
</div>

Пример

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

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Search extends Component
	{
		public $text = '';
		public $result = '';
		
		public function search($prefix)
		{
			$this->result = $prefix . ' ' . $this->text;
		}
		
		public function render()
		{
			return view('livewire.search');
		}
	}
?>

<div>
	<input type="text" wire:keyup="search('hello')" wire:model="text">
	<p>Result: {{ $result }}</p>
</div>

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

<div>
	<input type="text" wire:keyup="search('hello')" wire:model="text">
	<p>Result: hello abcde</p>
</div>

Пример

Давайте с помощью wire:keyup.enter вызовем метод только при отпускании клавиши Enter:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Search extends Component
	{
		public $text = '';
		public $result = '';
		
		public function search()
		{
			$this->result = $this->text;
		}
		
		public function render()
		{
			return view('livewire.search');
		}
	}
?>

<div>
	<input type="text" wire:keyup.enter="search" wire:model="text">
	<p>Result: {{ $result }}</p>
</div>

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

<div>
	<input type="text" wire:keyup.enter="search" wire:model="text">
	<p>Result: abcde</p>
</div>

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

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