Привязка индикатора в Livewire

Давайте теперь представим страницу с двумя кнопками: сохранить пост и удалить его. Подпись ожидания стоит рядом, но вспыхивает и после нажатия чужой кнопки, хотя запрос относится только к сохранению.

Индикатор можно ограничить конкретным методом через атрибут wire:target рядом с wire:loading. Тогда подпись появится лишь когда выполняется выбранное действие.

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

php artisan make:livewire PostBusy --class

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

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

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

Давайте заведём два метода, а в сохранении снова вызовем sleep:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class PostBusy extends Component
	{
		public function save()
		{
			sleep(1);
		}
		
		public function drop()
		{
		}
		
		public function render()
		{
			return view('livewire.post-busy');
		}
	}
?>

Давайте выведем кнопки и подпись с привязкой к сохранению:

<div>
	<button wire:click="save">
		Save
	</button>
	<button wire:click="drop">
		Drop
	</button>
	<div
		wire:loading
		wire:target="save"
	>
		Wait
	</div>
</div>

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