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

Директива wire:model.debounce используется для оптимизации производительности и снижения количества запросов к серверу при работе с полями ввода. Вместо того чтобы отправлять запрос на каждый символ, директива откладывает синхронизацию на указанное количество миллисекунд. Если пользователь продолжает печатать, таймер сбрасывается, и запрос отправляется только после паузы в вводе.

В значении директивы указывается время задержки в миллисекундах, например, wire:model.debounce="500". Если время не указано, Livewire использует значение по умолчанию - 150 мс.

Синтаксис

<input type="text" wire:model.debounce="timeout" />

Пример

Давайте создадим поле ввода, которое будет обновлять свойство компонента с задержкой в 500 мс:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class UserForm extends Component
	{
		public $name = '';
		
		public function render()
		{
			return view('livewire.user-form');
		}
	}
?>

<div>
	<label>Name:</label>
	<input type="text" wire:model.debounce="500" />
	<p>Current value: {{ $name }}</p>
</div>

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

<div>
	<label>Name:</label>
	<input type="text" />
	<p>Current value: </p>
</div>

Пример

Используем задержку в 1000 мс для обновления свойства при вводе:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Search extends Component
	{
		public $query = '';
		public $results = [];
		
		public function updatedQuery()
		{
			$this->results = [
				'result1',
				'result2',
				'result3'
			];
		}
		
		public function render()
		{
			return view('livewire.search');
		}
	}
?>

<div>
	<input type="text" wire:model.debounce="1000" />
	<ul>
		@foreach($results as $result)
			<li>{{ $result }}</li>
		@endforeach
	</ul>
</div>

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

<div>
	<input type="text" />
	<ul>
		<li>result1</li>
		<li>result2</li>
		<li>result3</li>
	</ul>
</div>

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

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