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

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

Синтаксис

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

В значении передаётся имя публичного метода компонента, который будет вызван при первом клике.

Пример

Давайте реализуем кнопку, которая начисляет бонус пользователю, но только один раз. Свойство $bonusActivated будет показывать, был ли активирован бонус:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class BonusActivator extends Component
	{
		public $bonusActivated = false;
		public $message = '';
		
		public function activateBonus()
		{
			$this->bonusActivated = true;
			$this->message = 'Бонус активирован!';
		}
		
		public function render()
		{
			return view('livewire.bonus-activator');
		}
	}
?>

<div>
	<button wire:click.once="activateBonus">
		Активировать бонус
	</button>
	@if ($bonusActivated)
		<span>{{ $message }}</span>
	@endif
</div>

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

<div>
	<button>
		Активировать бонус
	</button>
	<span>Бонус активирован!</span>
</div>

При повторном клике метод activateBonus не вызывается, и сообщение остаётся без изменений.

Пример

Директива также работает с модификаторами. Например, комбинация с .prevent отменяет действие браузера по умолчанию при первом клике:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class FormSubmitter extends Component
	{
		public $submitted = false;
		public $result = '';
		
		public function submitForm()
		{
			$this->submitted = true;
			$this->result = 'Форма отправлена один раз';
		}
		
		public function render()
		{
			return view('livewire.form-submitter');
		}
	}
?>

<form wire:submit.prevent.once="submitForm">
	<input type="text" placeholder="Введите данные">
	<button type="submit">
		Отправить
	</button>
	@if ($submitted)
		<p>{{ $result }}</p>
	@endif
</form>

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

<form>
	<input type="text" placeholder="Введите данные">
	<button type="submit">
		Отправить
	</button>
	<p>Форма отправлена один раз</p>
</form>

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

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

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