$wire.call()

Метод $wire.call используется в JavaScript-коде для вызова публичных методов компонента Livewire. Он принимает имя метода в качестве первого аргумента и дополнительные параметры для передачи в вызываемый метод. После вызова Livewire автоматически обновляет шаблон компонента, отражая изменения в состоянии.

Синтаксис

$wire.call('methodName', param1, param2, ...)

Метод возвращает Promise, который разрешается с результатом выполнения метода компонента.

Пример

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

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

<div>
	<button onclick="callInc()">
		+
	</button>
	<span>{{ $num }}</span>
</div>

<script>
	function callInc() {
		$wire.call('inc');
	}
</script>

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

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

Пример

Давайте передадим параметр в метод через JavaScript:

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

<div>
	<button onclick="callInc(5)">
		+5
	</button>
	<span>{{ $num }}</span>
</div>

<script>
	function callInc(step) {
		$wire.call('inc', step);
	}
</script>

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

<button>
	+5
</button>
<span>5</span>

Пример

Давайте получим результат выполнения метода и обработаем его:

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

<div>
	<button onclick="callIncAndAlert(3)">
		+3
	</button>
	<span>{{ $num }}</span>
</div>

<script>
	function callIncAndAlert(step) {
		$wire.call('inc', step).then(result => {
			alert('New value: ' + result);
		});
	}
</script>

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

"New value: 3"

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

метод $wire.set,
который устанавливает значение свойства компонента из JavaScript
метод $wire.refresh,
который принудительно обновляет шаблон компонента
метод $wire.commit,
который отправляет текущее состояние компонента на сервер
метод $wire.watch,
который отслеживает изменения свойства компонента