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

Директива wire:blur вешается на HTML-элемент и вызывает указанный метод компонента при потере фокуса. В значение передаётся имя публичного метода. После вызова Livewire обновляет шаблон компонента. Директива особенно полезна для валидации полей ввода или выполнения действий после завершения редактирования.

Синтаксис

<input wire:blur="methodName">

Пример

Давайте выведем сообщение при потере фокуса на поле ввода:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class Message extends Component
	{
		public $text = '';

		public $message = '';

		public function showMessage()
		{
			$this->message = 'Field lost focus';
		}

		public function render()
		{
			return view('livewire.message');
		}
	}
?>

<input wire:blur="showMessage" type="text" placeholder="Type something">
<p>{{ $message }}</p>

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

<input type="text" placeholder="Type something">
<p>Field lost focus</p>

Пример

Давайте передадим в метод параметр с id элемента:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class Tracker extends Component
	{
		public $inputId = '';

		public function trackBlur($id)
		{
			$this->inputId = $id;
		}

		public function render()
		{
			return view('livewire.tracker');
		}
	}
?>

<input wire:blur="trackBlur('input1')" id="input1" type="text" placeholder="Field 1">
<input wire:blur="trackBlur('input2')" id="input2" type="text" placeholder="Field 2">
<p>Last blurred field: {{ $inputId }}</p>

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

<input id="input1" type="text" placeholder="Field 1">
<input id="input2" type="text" placeholder="Field 2">
<p>Last blurred field: input2</p>

Пример

Давайте выполним валидацию поля при потере фокуса:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class Validator extends Component
	{
		public $email = '';

		public $error = '';

		public function validateEmail()
		{
			if (!filter_var($this->email, FILTER_VALIDATE_EMAIL))
			{
				$this->error = 'Invalid email address';
			}
			else
			{
				$this->error = '';
			}
		}

		public function render()
		{
			return view('livewire.validator');
		}
	}
?>

<input wire:blur="validateEmail" wire:model="email" type="email" placeholder="Enter email">
@if ($error)
	<p style="color: red;">{{ $error }}</p>
@endif

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

<input type="email" placeholder="Enter email">
<p style="color: red;">Invalid email address</p>

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

директиву wire:focus,
которая вызывает метод при получении фокуса элементом
директиву wire:change,
которая вызывает метод при изменении значения поля
директиву wire:model.blur,
которая синхронизирует данные с полем при потере фокуса
директиву wire:keydown,
которая вызывает метод при нажатии клавиши