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

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

Синтаксис

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

Пример

Давайте увеличим число $num по клику на кнопку:

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

<button wire:click="inc">
	+
</button>
<span>{{ $num }}</span>

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

<button>
	+
</button>
<span>1</span>

Пример

Давайте передадим в метод параметр 2:

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

<button wire:click="inc(2)">
	+2
</button>
<span>{{ $num }}</span>

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

<button>
	+2
</button>
<span>2</span>

Пример

Давайте передадим в метод несколько параметров:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class Counter extends Component
	{
		public $num = 0;
		
		public function inc($step, $multiplier)
		{
			$this->num += $step * $multiplier;
		}
		
		public function render()
		{
			return view('livewire.counter');
		}
	}
?>

<button wire:click="inc(2, 3)">
	+6
</button>
<span>{{ $num }}</span>

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

<button>
	+6
</button>
<span>6</span>

Пример

Давайте передадим в метод значение свойства $step:

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

<button wire:click="inc">
	+{{ $step }}
</button>
<span>{{ $num }}</span>

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

<button>
	+3
</button>
<span>3</span>

Пример

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

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class Message extends Component
	{
		public $text = '';
		
		public function setMessage($message)
		{
			$this->text = $message;
		}
		
		public function render()
		{
			return view('livewire.message');
		}
	}
?>

<button wire:click="setMessage('hello')">
	Set message
</button>
<span>{{ $text }}</span>

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

<button>
	Set message
</button>
<span>hello</span>

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

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