Директива wire:click.preserve-scroll

Директива wire:click.preserve-scroll является модификатором директивы wire:click и предназначена для сохранения текущей позиции прокрутки страницы или контейнера после выполнения действия. По умолчанию при клике и обновлении компонента Livewire сбрасывает прокрутку к началу страницы. Модификатор .preserve-scroll отключает это поведение.

Синтаксис

<button wire:click.preserve-scroll="methodName">
	text
</button>

Пример

Давайте реализуем компонент со списком и кнопкой добавления элемента. При добавлении прокрутка страницы не должна сбрасываться:

<?php
	namespace App\Livewire;

	use Livewire\Component;

	class ListComponent extends Component
	{
		public $items = ['a', 'b', 'c'];

		public function addItem()
		{
			$this->items[] = 'new';
		}

		public function render()
		{
			return view('livewire.list-component');
		}
	}
?>

<div>
	<button wire:click.preserve-scroll="addItem">
		Add item
	</button>
	<ul>
		@foreach ($items as $item)
			<li>{{ $item }}</li>
		@endforeach
	</ul>
</div>

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

<button>
	Add item
</button>
<ul>
	<li>a</li>
	<li>b</li>
	<li>c</li>
</ul>

После нажатия на кнопку элемент 'new' добавится в конец списка, а позиция прокрутки останется прежней.

Пример с передачей параметра

Передадим в метод строку для добавления в список:

<?php
	namespace App\Livewire;

	use Livewire\Component;

	class ListComponent extends Component
	{
		public $items = ['a', 'b', 'c'];

		public function addItem($value)
		{
			$this->items[] = $value;
		}

		public function render()
		{
			return view('livewire.list-component');
		}
	}
?>

<div>
	<button wire:click.preserve-scroll="addItem('d')">
		Add 'd'
	</button>
	<ul>
		@foreach ($items as $item)
			<li>{{ $item }}</li>
		@endforeach
	</ul>
</div>

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

<button>
	Add 'd'
</button>
<ul>
	<li>a</li>
	<li>b</li>
	<li>c</li>
	<li>d</li>
</ul>

Пример с несколькими модификаторами

Модификатор .preserve-scroll можно комбинировать с другими модификаторами, например с .prevent:

<button wire:click.prevent.preserve-scroll="addItem">
	Add item
</button>

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

директиву wire:click,
которая вызывает метод компонента при клике
модификатор wire:click.prevent,
который отменяет действие браузера по умолчанию
модификатор wire:click.stop,
который останавливает всплытие события
модификатор wire:click.once,
который выполняет метод только один раз