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

Директива wire:model.blur является модификатором базовой директивы wire:model. Она вешается на поле ввода и связывает его значение со свойством компонента. В отличие от стандартной wire:model, которая отправляет запрос при каждом изменении, данная директива отправляет запрос только тогда, когда поле ввода теряет фокус. В значение передается имя публичного свойства компонента.

Синтаксис

<input type="text" wire:model.blur="propertyName">

Пример

Давайте создадим поле ввода, которое будет синхронизировать свое значение со свойством $text только после того, как пользователь завершит ввод и кликнет вне поля:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class TextComponent extends Component
	{
		public $text = '';
		
		public function render()
		{
			return view('livewire.text-component');
		}
	}
?>

<div>
	<input type="text" wire:model.blur="text">
	<p>Current text: {{ $text }}</p>
</div>

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

<input type="text" value="hello">
<p>Current text: hello</p>

При вводе текста в поле значение свойства $text не обновляется. Как только вы кликнете в другую область страницы (или нажмете Tab), значение $text обновится и отобразится ниже.

Пример

Давайте применим wire:model.blur к текстовой области и выведем длину введенного текста:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class TextareaComponent extends Component
	{
		public $content = '';
		
		public function render()
		{
			return view('livewire.textarea-component');
		}
	}
?>

<div>
	<textarea wire:model.blur="content"></textarea>
	<p>Length: {{ strlen($content) }}</p>
</div>

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

<textarea>Hello world</textarea>
<p>Length: 11</p>

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

Пример

Давайте используем wire:model.blur с числовым полем и модификатором .number для автоматического преобразования значения в число:

<?php
	namespace App\Livewire;
	
	use Livewire\Component;
	
	class NumberComponent extends Component
	{
		public $num = 0;
		
		public function render()
		{
			return view('livewire.number-component');
		}
	}
?>

<div>
	<input type="number" wire:model.blur.number="num">
	<p>Number: {{ $num }}</p>
	<p>Type: {{ gettype($num) }}</p>
</div>

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

<input type="number" value="42">
<p>Number: 42</p>
<p>Type: integer</p>

Модификатор .number преобразует строковое значение из поля ввода в число. Это особенно полезно при работе с математическими операциями.

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

директиву wire:model,
которая синхронизирует поле ввода со свойством при каждом изменении
директиву wire:model.live,
которая обновляет свойство в реальном времени при вводе
директиву wire:model.change,
которая синхронизирует данные при изменении значения поля
директиву wire:blur,
которая вызывает метод компонента при потере фокуса