Изолированный фрагмент в Livewire

Пусть на странице поста видны подпись и число просмотров. Кнопка должна обновить только показатель просмотров, но Livewire отправляет разметку всего шаблона, и моргает даже неизменная подпись.

Директива island оборачивает фрагмент шаблона: запрос, который затрагивает только этот участок, не перерисовывает разметку снаружи. Закрывают область парой endisland.

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

php artisan make:livewire PostBoard --class

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

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

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

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

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

Давайте в шаблоне выведем подпись и кнопку снаружи, а просмотры спрячем внутрь острова:

<div>
	{{ $note }}
	<button
		type="button"
		wire:click="$refresh"
	>
		Refresh
	</button>
	@island
		{{ $views }}
	@endisland
</div>

Создайте компонент EmployeeBoard. Число просмотров работника живёт отдельным куском и не тянет за собой всю страницу.