Директива @persist

Директива @persist в Livewire используется для сохранения состояния DOM-элементов между запросами и обновлениями компонента. Она особенно полезна для сохранения состояния скролла, фокуса, выбранных элементов и других пользовательских взаимодействий. Директива применяется к HTML-элементу и автоматически восстанавливает его состояние при повторном рендеринге.

Синтаксис

<div @persist="key">
	<!-- content -->
</div>

Где key - уникальный идентификатор для сохранения состояния элемента.

Пример

Давайте сохраним состояние скролла контейнера при обновлении компонента:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ScrollContainer extends Component
	{
		public $items = [];
		
		public function mount()
		{
			$this->items = range(1, 50);
		}
		
		public function addItems()
		{
			$count = count($this->items);
			$this->items = array_merge($this->items, range($count + 1, $count + 10));
		}
		
		public function render()
		{
			return view('livewire.scroll-container');
		}
	}
?>

<div>
	<div @persist="scroll-container" style="height: 200px; overflow-y: auto;">
		@foreach ($items as $item)
			<div>{{ $item }}</div>
		@endforeach
	</div>
	<button wire:click="addItems">Add items</button>
</div>

В этом примере позиция скролла сохраняется даже после добавления новых элементов и обновления DOM.

Пример

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

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class InputFocus extends Component
	{
		public $text = '';
		
		public function updateText()
		{
			$this->text = 'Updated';
		}
		
		public function render()
		{
			return view('livewire.input-focus');
		}
	}
?>

<div>
	<input type="text" @persist="input-focus" wire:model="text">
	<button wire:click="updateText">Update text</button>
</div>

После обновления компонента поле ввода сохранит состояние фокуса, что улучшает пользовательский опыт.

Пример

Давайте сохраним состояние выбранного элемента в списке:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class SelectedItem extends Component
	{
		public $items = ['a', 'b', 'c', 'd', 'e'];
		public $selected = null;
		
		public function selectItem($item)
		{
			$this->selected = $item;
		}
		
		public function refreshItems()
		{
			// Обычное обновление компонента
		}
		
		public function render()
		{
			return view('livewire.selected-item');
		}
	}
?>

<div>
	<ul @persist="selected-list">
		@foreach ($items as $item)
			<li 
				wire:click="selectItem('{{ $item }}')"
				style="cursor: pointer; @if($selected === $item) font-weight: bold; @endif"
			>
				{{ $item }}
			</li>
		@endforeach
	</ul>
	<button wire:click="refreshItems">Refresh</button>
</div>

При обновлении компонента сохраняется стиль выбранного элемента, что позволяет пользователю видеть свой выбор.

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

директиву @livewire,
которая выводит компонент Livewire на странице
директиву @livewireStyles,
которая подключает CSS-стили Livewire
директиву @livewireScripts,
которая подключает JavaScript-скрипты Livewire
директиву @this,
которая предоставляет доступ к JavaScript-объекту компонента