Директива wire:ignore

Директива wire:ignore вешается на HTML-элемент и предотвращает его перерисовку при обновлении компонента. Все дочерние элементы также исключаются из обновления. Это позволяет сохранить состояние интерактивных элементов, например, виджетов сторонних библиотек или кастомных JavaScript-компонентов. Директива не принимает параметров.

Синтаксис

<div wire:ignore>
	<p>This content will not be updated</p>
</div>

Пример

Пусть у нас есть компонент с числом $num, которое увеличивается по клику на кнопку, и статический текст, который мы хотим защитить от обновления:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class NumberComponent extends Component
	{
		public $num = 0;

		public function inc()
		{
			$this->num++;
		}

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

<button wire:click="inc">
	+
</button>
<span>{{ $num }}</span>

<div wire:ignore>
	<p>This text will not be re-rendered</p>
</div>

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

<button>
	+
</button>
<span>3</span>
<div>
	<p>This text will not be re-rendered</p>
</div>

Пример

Директива wire:ignore часто используется для сохранения состояния сторонних библиотек. В этом примере мы сохраняем состояние библиотеки Flatpickr при обновлении компонента:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class FormComponent extends Component
	{
		public $value = 'initial';

		public function update()
		{
			$this->value = 'updated from server';
		}

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

<button wire:click="update">
	Update
</button>
<span>{{ $value }}</span>

<div wire:ignore>
	<input type="text" id="datepicker">
</div>

<script>
	document.addEventListener('DOMContentLoaded', function () {
		flatpickr('#datepicker', {});
	});
</script>

После нажатия на кнопку поле выбора даты не будет пересоздаваться, а сохранит свое состояние благодаря директиве wire:ignore.

Пример

Используем директиву wire:ignore для сохранения содержимого сложной HTML-таблицы с кастомными обработчиками:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class TableComponent extends Component
	{
		public $count = 0;

		public function increment()
		{
			$this->count++;
		}

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

<button wire:click="increment">
	Count: {{ $count }}
</button>

<div wire:ignore>
	<table>
		<thead>
			<tr>
				<th>ID</th>
				<th>Name</th>
				<th>Status</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td>John</td>
				<td class="status">Active</td>
			</tr>
			<tr>
				<td>2</td>
				<td>Jane</td>
				<td class="status">Inactive</td>
			</tr>
		</tbody>
	</table>
</div>

Таблица с данными останется неизменной при каждом клике на кнопку, так как она обернута в wire:ignore. Обновляется только счетчик кликов.

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

директиву wire:ignore.self,
которая игнорирует только сам элемент, но обновляет дочерние
директиву wire:cloak,
которая скрывает элементы до инициализации Livewire
директиву wire:key,
которая помогает Livewire отслеживать элементы в списках
директиву wire:model,
которая привязывает поле ввода к свойству компонента