Связь с Alpine в Livewire

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

Директива entangle связывает локальную переменную Alpine с публичным свойством компонента, и обе стороны видят одно и то же значение.

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

php artisan make:livewire PostPanel --class

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

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

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

<div>
	<div x-data="{ open: @entangle('open') }">
		<button @click="open = !open">
			Toggle
		</button>
		<div x-show="open">
			Panel
		</div>
	</div>
	<div>
		{{ $open ? 'yes' : 'no' }}
	</div>
</div>

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

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

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

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