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

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

Синтаксис

<a href="#" wire:click.prevent="methodName">text</a>
<button type="submit" wire:click.prevent="methodName">text</button>

Пример

Давайте сделаем ссылку, клик по которой увеличивает число $num и не перезагружает страницу:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Counter extends Component
	{
		public $num = 0;
		
		public function inc()
		{
			$this->num++;
		}
		
		public function render()
		{
			return view('livewire.counter');
		}
	}
?>

<a href="#" wire:click.prevent="inc">+</a>
<span>{{ $num }}</span>

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

<a href="#">+</a>
<span>1</span>

Пример

Предотвратим отправку формы по умолчанию и вызовем метод с параметром 5:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class FormHandler extends Component
	{
		public $count = 0;
		
		public function add($val)
		{
			$this->count += $val;
		}
		
		public function render()
		{
			return view('livewire.form-handler');
		}
	}
?>

<form>
	<button type="submit" wire:click.prevent="add(5)">
		Add 5
	</button>
	<span>{{ $count }}</span>
</form>

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

<form>
	<button type="submit">Add 5</button>
	<span>5</span>
</form>

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

директиву wire:click,
которая вызывает метод при клике без отмены действий
директиву wire:submit.prevent,
которая предотвращает отправку формы и вызывает метод
директиву wire:click.stop,
которая останавливает всплытие события клика
директиву wire:click.self,
которая реагирует на клик только по самому элементу