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

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

Синтаксис

<button wire:click.async="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');
		}
	}
?>

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

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

"num is 0"

Несмотря на то, что метод inc увеличил свойство $num, на экране осталось прежнее значение, так как шаблон не обновлялся.

Пример

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

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use IlluminateSupportFacadesLog;
	
	class Logger extends Component
	{
		public $message = '';
		
		public function logAction($text)
		{
			Log::info('User action: ' . $text);
		}
		
		public function render()
		{
			return view('livewire.logger');
		}
	}
?>

<button wire:click.async="logAction('clicked')">
	Log Click
</button>

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

"Action logged successfully"

Клик по кнопке асинхронно отправит запрос на сервер, но интерфейс останется без изменений.

Пример

Давайте выполним несколько асинхронных операций с разными параметрами:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use IlluminateSupportFacadesCache;
	
	class Stats extends Component
	{
		public $counter = 0;
		
		public function increment($value)
		{
			Cache::increment('async_counter', $value);
		}
		
		public function render()
		{
			return view('livewire.stats');
		}
	}
?>

<button wire:click.async="increment(1)">
	+1
</button>
<button wire:click.async="increment(5)">
	+5
</button>
<button wire:click.async="increment(10)">
	+10
</button>
<span>Current: {{ $counter }}</span>

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

"counter is 0"

Все клики будут обработаны асинхронно, значение $counter на экране не изменится, но в кеше будут накапливаться данные.

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

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