Директива wire:click.stop

Директива wire:click.stop вешается на HTML-элемент и работает аналогично wire:click, но с дополнительным модификатором stop, который предотвращает всплытие события клика. В значение передаётся имя публичного метода компонента. После вызова Livewire обновляет шаблон компонента.

Синтаксис

<button wire:click.stop="methodName">
	text
</button>

Пример

Пусть у нас есть вложенные элементы: див с методом outerClick и кнопка с методом innerClick. Без модификатора stop при клике на кнопку сработают оба метода:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ClickDemo extends Component
	{
		public $outerLog = [];
		public $innerLog = [];
		
		public function outerClick()
		{
			$this->outerLog[] = 'outer clicked';
		}
		
		public function innerClick()
		{
			$this->innerLog[] = 'inner clicked';
		}
		
		public function render()
		{
			return view('livewire.click-demo');
		}
	}
?>

<div wire:click="outerClick" style="padding: 20px; background: #f0f0f0;">
	<button wire:click="innerClick">
		click me
	</button>
	<p>outer: {{ json_encode($outerLog) }}</p>
	<p>inner: {{ json_encode($innerLog) }}</p>
</div>

Результат выполнения кода после клика на кнопку:

<div style="padding: 20px; background: #f0f0f0;">
	<button>
		click me
	</button>
	<p>outer: ["outer clicked"]</p>
	<p>inner: ["inner clicked"]</p>
</div>

Пример

Теперь добавим модификатор stop на кнопку, чтобы предотвратить вызов внешнего обработчика:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ClickDemo extends Component
	{
		public $outerLog = [];
		public $innerLog = [];
		
		public function outerClick()
		{
			$this->outerLog[] = 'outer clicked';
		}
		
		public function innerClick()
		{
			$this->innerLog[] = 'inner clicked';
		}
		
		public function render()
		{
			return view('livewire.click-demo');
		}
	}
?>

<div wire:click="outerClick" style="padding: 20px; background: #f0f0f0;">
	<button wire:click.stop="innerClick">
		click me
	</button>
	<p>outer: {{ json_encode($outerLog) }}</p>
	<p>inner: {{ json_encode($innerLog) }}</p>
</div>

Результат выполнения кода после клика на кнопку:

<div style="padding: 20px; background: #f0f0f0;">
	<button>
		click me
	</button>
	<p>outer: []</p>
	<p>inner: ["inner clicked"]</p>
</div>

Как видно, метод внешнего дива не был вызван благодаря модификатору stop.

Смотрите также

директиву wire:click,
которая вызывает метод при клике на элемент
директиву wire:click.prevent,
которая отменяет действие браузера по умолчанию
директиву wire:click.self,
которая обрабатывает клик только по самому элементу
директиву wire:click.once,
которая вызывает метод только один раз