Клик по самому элементу в Livewire

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

Модификатор .self вызывает метод только если клик пришёлся в сам элемент, а не в потомка. Кнопка внутри остаётся без своего вызова.

Страница откроется по адресу /posts/sheet. Давайте опишем компонент PostSheet:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class PostSheet extends Component
	{
		public $closed = '';
		
		public function close()
		{
			$this->closed = 'Closed';
		}
		
		public function render()
		{
			return view('livewire.post-sheet');
		}
	}
?>

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

<div wire:click.self="close">
	<button type="button">
		Stay
	</button>
	<div>{{ $closed }}</div>
</div>

Давайте откроем страницу по адресу /posts/sheet:

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

Давайте вставим компонент на страницу:

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

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