Стоп всплытия в Livewire

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

Модификатор .stop у wire:click останавливает всплытие. Метод на кнопке выполняется, а родительский клик не получает событие.

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

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class PostNest extends Component
	{
		public $outer = '';
		public $inner = '';
		
		public function outer()
		{
			$this->outer = 'Outer';
		}
		
		public function inner()
		{
			$this->inner = 'Inner';
		}
		
		public function render()
		{
			return view('livewire.post-nest');
		}
	}
?>

Давайте повесим клик на карточку и на кнопку со стопом всплытия:

<div wire:click="outer">
	Post card
	<button wire:click.stop="inner">
		Open
	</button>
	<div>{{ $outer }}</div>
	<div>{{ $inner }}</div>
</div>

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

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

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

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

Создайте компонент EmployeeNest. Кнопка внутри карточки работника не задевает клик по самой карточке.