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

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

Синтаксис

<button wire:click.renderless="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.renderless="inc">
	+
</button>
<span>{{ $num }}</span>

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

<button>
	+
</button>
<span>0</span>

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

Пример

Передадим параметры в метод, который записывает данные в сессию без обновления страницы:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use IlluminateSupportFacadesSession;
	
	class Logger extends Component
	{
		public function logAction($action)
		{
			Session::push('log', $action);
		}
		
		public function render()
		{
			return view('livewire.logger');
		}
	}
?>

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

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

<button>
	Log Click
</button>

При клике на кнопку метод logAction добавляет запись в сессию, но страница остаётся без изменений. Это эффективно для действий, не влияющих на отображение.

Пример

Используем wire:click.renderless для запуска фонового процесса, например, отправки уведомления:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use IlluminateSupportFacadesNotification;
	use AppNotificationsUserNotification;
	
	class Notifier extends Component
	{
		public function sendNotification()
		{
			$user = auth()->user();
			Notification::send($user, new UserNotification());
		}
		
		public function render()
		{
			return view('livewire.notifier');
		}
	}
?>

<button wire:click.renderless="sendNotification">
	Send Notification
</button>

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

<button>
	Send Notification
</button>

Нажатие кнопки отправляет уведомление пользователю, не вызывая обновление интерфейса.

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

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