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

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

Синтаксис

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

Пример

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

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Message extends Component
	{
		public $text = '';
		public $message = '';
		
		public function showMessage()
		{
			$this->message = 'You entered: ' . $this->text;
		}
		
		public function render()
		{
			return view('livewire.message');
		}
	}
?>

<input
	type="text"
	wire:model="text"
	wire:keydown.enter="showMessage"
	placeholder="Press Enter"
/>
<p>{{ $message }}</p>

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

<input type="text" placeholder="Press Enter" />
<p>"You entered: Hello"</p>

Пример

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

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Message extends Component
	{
		public $text = '';
		public $message = '';
		
		public function showMessage($text)
		{
			$this->message = 'You entered: ' . $text;
		}
		
		public function render()
		{
			return view('livewire.message');
		}
	}
?>

<input
	type="text"
	wire:model="text"
	wire:keydown.enter="showMessage(text)"
	placeholder="Press Enter"
/>
<p>{{ $message }}</p>

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

<input type="text" placeholder="Press Enter" />
<p>"You entered: World"</p>

Пример

Давайте реализуем поиск по нажатию Enter:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Search extends Component
	{
		public $query = '';
		public $results = [];
		
		public function search()
		{
			$data = ['apple', 'banana', 'cherry', 'date', 'elderberry'];
			$this->results = array_filter($data, function($item) {
				return str_contains($item, $this->query);
			});
		}
		
		public function render()
		{
			return view('livewire.search');
		}
	}
?>

<input
	type="text"
	wire:model="query"
	wire:keydown.enter="search"
	placeholder="Search..."
/>
<ul>
	@foreach ($results as $item)
		<li>{{ $item }}</li>
	@endforeach
</ul>

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

<input type="text" placeholder="Search..." />
<ul>
	<li>apple</li>
</ul>

Пример

Давайте отправим форму по нажатию Enter:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Form extends Component
	{
		public $name = '';
		public $email = '';
		public $success = false;
		
		public function submit()
		{
			$this->success = true;
		}
		
		public function render()
		{
			return view('livewire.form');
		}
	}
?>

<div>
	<input
		type="text"
		wire:model="name"
		placeholder="Name"
	/>
	<input
		type="email"
		wire:model="email"
		wire:keydown.enter="submit"
		placeholder="Email"
	/>
	@if ($success)
		<p>Form submitted successfully!</p>
	@endif
</div>

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

<div>
	<input type="text" placeholder="Name" />
	<input type="email" placeholder="Email" />
	<p>Form submitted successfully!</p>
</div>

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

директиву wire:keydown,
которая вызывает метод при любом нажатии клавиши
директиву wire:keydown.escape,
которая вызывает метод при нажатии клавиши Escape
директиву wire:keydown.tab,
которая вызывает метод при нажатии клавиши Tab
директиву wire:model,
которая привязывает поле ввода к свойству компонента