Показ по условию в Livewire

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

Блок можно оставить в шаблоне и управлять видимостью через атрибут wire:show. Он прячет элемент стилями, не выкидывая его из DOM, поэтому соседи остаются на месте.

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

php artisan make:livewire PostHelp --class

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

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

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

Давайте заведём флаг открытия и метод переключения:

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

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

<div>
	<button wire:click="toggle">
		Toggle
	</button>
	<div wire:show="open">
		Hint
	</div>
</div>

Создайте компонент EmployeeHelp. Подсказка о работнике скрывается и показывается, не исчезая из страницы.