Действие в браузере в Livewire

Пусть на странице поста кнопка должна сразу сменить подпись в разметке, без отдельного запроса на сервер: человек ждёт мгновенный отклик, а заводить пустой метод в PHP ради одной строки неудобно.

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

Страница откроется по адресу /posts/ping. Давайте создадим компонент PostPing:

php artisan make:livewire PostPing --class

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

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class PostPing extends Component
	{
		public $note = '';
		
		public function render()
		{
			return view('livewire.post-ping');
		}
	}
?>

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

<div>
	<button wire:click="$js.ping">
		Ping
	</button>
	<div>{{ $note }}</div>
</div>
@script
	$js('ping', () => {
		$wire.note = 'Ping';
	});
@endscript

Давайте добавим маршрут и страницу:

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

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

Создайте компонент EmployeePing. Кнопка меняет подпись работника в браузере, без отдельного метода на сервере.