Отмена перехода в Livewire

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

Модификатор .prevent у wire:click отменяет стандартное поведение элемента. Для ссылки это значит: метод компонента выполнится, а переход по href не произойдёт.

Давайте создадим компонент PostStay:

php artisan make:livewire PostStay --class

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

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

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

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

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

Давайте выведем ссылку с отменой перехода:

<div>
	<a
		href="/posts"
		wire:click.prevent="ping"
	>
		Stay
	</a>
	<div>{{ $note }}</div>
</div>

Создайте компонент EmployeeStay. Ссылка выполняет действие компонента и не уводит браузер со страницы.