Именованный остров в Livewire

Пусть на странице поста рядом стоят подпись и меняющаяся цифра. Кнопка должна перерисовать только цифру, а подпись остаётся как была.

Острову задают имя через параметр name, а на кнопку вешают атрибут island с тем же именем: Livewire шлёт ответ только для этого участка.

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

php artisan make:livewire PostStats --class

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

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

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

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

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

Давайте в шаблоне выведем подпись снаружи, секунду внутри именованного острова и повесим island на кнопку. Секунду возьмём через функцию date:

<div>
	{{ $note }}
	@island(name: 'stats')
		{{ date('s') }}
	@endisland
	<button
		type="button"
		wire:click="$refresh"
		wire:island="stats"
	>
		Refresh
	</button>
</div>

Создайте компонент EmployeeStats. Кнопка обновляет только число работника, подпись рядом остаётся.