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

Директива wire:model.live.debounce используется для привязки поля ввода к свойству компонента с одновременной установкой задержки обновления. Она комбинирует поведение wire:model.live (немедленное обновление при вводе) с задержкой debounce, которая ограничивает частоту отправки запросов на сервер. В значение передаётся время задержки в миллисекундах.

Синтаксис

<input type="text" wire:model.live.debounce.500ms="property">

Пример

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

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Search extends Component
	{
		public $query = '';
		
		public function render()
		{
			return view('livewire.search');
		}
	}
?>

<div>
	<input type="text" wire:model.live.debounce.500ms="query">
	<p>Результат поиска: {{ $query }}</p>
</div>

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

<div>
	<input type="text">
	<p>Результат поиска: "text"</p>
</div>

Пример

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

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class SearchForm extends Component
	{
		public $search = '';
		public $count = 0;
		
		public function updatedSearch()
		{
			$this->count = strlen($this->search);
		}
		
		public function render()
		{
			return view('livewire.search-form');
		}
	}
?>

<div>
	<input type="text" wire:model.live.debounce.1000ms="search">
	<p>Длина строки: {{ $count }}</p>
</div>

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

<div>
	<input type="text">
	<p>Длина строки: 5</p>
</div>

Пример

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

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

<div>
	<input type="text" wire:model.live.debounce.300ms="name" placeholder="Имя">
	<input type="text" wire:model.live.debounce.500ms="email" placeholder="Email">
	<input type="text" wire:model.live.debounce.800ms="phone" placeholder="Телефон">
	<p>Имя: {{ $name }}</p>
	<p>Email: {{ $email }}</p>
	<p>Телефон: {{ $phone }}</p>
</div>

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

<div>
	<input type="text" placeholder="Имя">
	<input type="text" placeholder="Email">
	<input type="text" placeholder="Телефон">
	<p>Имя: "John"</p>
	<p>Email: "john@mail.com"</p>
	<p>Телефон: "123456789"</p>
</div>

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

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