Нажатие клавиши в Livewire

Давайте разберём такой случай. Поле заметки должно реагировать на клавиатуру, а не только на отдельную кнопку рядом. Пока есть только клик, набор букв сам по себе ничего не сообщает компоненту.

Атрибут wire:keydown вызывает метод при нажатии клавиш внутри элемента. Каждое нажатие уходит на сервер так же, как клик по кнопке.

Страница откроется по адресу /posts/keys. Давайте опишем компонент PostKeys:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class PostKeys extends Component
	{
		public $count = 0;
		
		public function ping()
		{
			$this->count++;
		}
		
		public function render()
		{
			return view('livewire.post-keys');
		}
	}
?>

Давайте свяжем поле с keydown и выведем счётчик нажатий:

<div>
	<input
		type="text"
		wire:keydown="ping"
	>
	<div>{{ $count }}</div>
</div>

Давайте откроем страницу по адресу /posts/keys:

<?php
	Route::get('/posts/keys', function () {
		return view('posts-keys');
	});
?>

Давайте вставим компонент на страницу:

<x-layout>
	<livewire:post-keys />
</x-layout>

Создайте компонент EmployeeKeys. Каждая клавиша в поле имени увеличивает счётчик.