Атрибут #[Defer]

Атрибут #[Defer] используется для маркировки публичных свойств компонента Livewire, изменения которых не должны немедленно отправляться на сервер. Вместо этого их значения накапливаются на клиенте и передаются вместе со следующим действием, запускающим сетевой запрос. Это особенно эффективно при работе с полями ввода, которые часто изменяются, но не требуют мгновенной реакции сервера.

Синтаксис

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use LivewireAttributesDefer;
	
	class ExampleComponent extends Component
	{
		#[Defer]
		public $propertyName = 'default value';
		
		public function render()
		{
			return view('livewire.example-component');
		}
	}
?>

Атрибут #[Defer] импортируется из пространства имён LivewireAttributesDefer.

Пример

Рассмотрим компонент с полем поиска. Обычно при вводе каждого символа происходит запрос на сервер, что может создавать излишнюю нагрузку. С атрибутом #[Defer] мы откладываем отправку данных до момента отправки формы:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use LivewireAttributesDefer;
	
	class SearchComponent extends Component
	{
		#[Defer]
		public $query = '';
		
		public $results = [];
		
		public function search()
		{
			// Simulate search using deferred property
			$this->results = $this->query !== '' 
				? ['result 1', 'result 2', 'result 3'] 
				: [];
		}
		
		public function render()
		{
			return view('livewire.search-component');
		}
	}
?>

<div>
	<input type="text" wire:model.defer="query" placeholder="Search...">
	<button wire:click="search">Search</button>
	
	<ul>
		@foreach ($results as $result)
			<li>{{ $result }}</li>
		@endforeach
	</ul>
</div>

Пример

Атрибут #[Defer] также полезен для свойств, которые изменяются во время сложных пользовательских взаимодействий, например, при перетаскивании элементов. Вместо множества мелких обновлений значение будет отправлено единожды:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use LivewireAttributesDefer;
	
	class DraggableComponent extends Component
	{
		#[Defer]
		public $position = 0;
		
		public $savedPosition = 0;
		
		public function savePosition()
		{
			$this->savedPosition = $this->position;
		}
		
		public function render()
		{
			return view('livewire.draggable-component');
		}
	}
?>

<div>
	<div 
		wire:click="$set('position', position + 10)"
		style="cursor: pointer; padding: 10px; background: #f0f0f0;"
	>
		Move right (+10)
	</div>
	<div 
		wire:click="$set('position', position - 10)"
		style="cursor: pointer; padding: 10px; background: #f0f0f0;"
	>
		Move left (-10)
	</div>
	
	<p>Current position: {{ $position }}</p>
	<p>Saved position: {{ $savedPosition }}</p>
	
	<button wire:click="savePosition">Save position</button>
</div>

Здесь позиция накапливается при каждом клике, но отправляется на сервер только при нажатии кнопки сохранения.

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

атрибут #[Computed],
который кеширует результат выполнения метода
атрибут #[Locked],
который запрещает изменение свойства на клиенте
атрибут #[Url],
который синхронизирует свойство с параметрами URL
атрибут #[Session],
который сохраняет свойство в сессии