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

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

Синтаксис

<button wire:click="delete" wire:confirm="Are you sure?">
	Delete
</button>

Пример

Давайте при клике на кнопку удаления покажем диалог подтверждения:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class PostIndex extends Component
	{
		public $posts = ['First', 'Second', 'Third'];
		
		public function delete($index)
		{
			unset($this->posts[$index]);
			$this->posts = array_values($this->posts);
		}
		
		public function render()
		{
			return view('livewire.post-index');
		}
	}
?>

<ul>
	@foreach ($posts as $index => $post)
		<li>
			{{ $post }}
			<button 
				wire:click="delete({{ $index }})" 
				wire:confirm="Are you sure you want to delete this post?"
			>
				Delete
			</button>
		</li>
	@endforeach
</ul>

При нажатии на кнопку Delete сначала появится диалог подтверждения с текстом из директивы. После подтверждения выполнится метод delete и элемент будет удалён из списка.

Пример

Директиву wire:confirm можно использовать не только с wire:click, но и с другими событиями, например с отправкой формы:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Settings extends Component
	{
		public $data = 'current data';
		
		public function resetSettings()
		{
			$this->data = 'default';
		}
		
		public function render()
		{
			return view('livewire.settings');
		}
	}
?>

<form wire:submit="resetSettings">
	<p>Current data: {{ $data }}</p>
	<button 
		type="submit" 
		wire:confirm="This will reset all settings. Continue?"
	>
		Reset
	</button>
</form>

В этом примере при отправке формы сначала появится диалог подтверждения, и только после согласия пользователя данные будут сброшены к значению default.

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

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