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

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

Синтаксис

<div wire:ignore.self>
	Содержимое, которое не будет обновляться
</div>

Пример

Давайте создадим компонент, в котором при клике изменяется свойство $counter. Элемент с атрибутом wire:ignore.self не будет обновляться при изменении данных:

<?php
	namespace App\Livewire;

	use Livewire\Component;

	class IgnoreSelfExample extends Component
	{
		public $counter = 0;

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

		public function render()
		{
			return view('livewire.ignore-self-example');
		}
	}
?>

<div>
	<div wire:ignore.self class="ignored-box">
		Время: {{ now() }}
	</div>

	<button wire:click="increment">
		Нажми меня ({{ $counter }})
	</button>
</div>

После первого клика кнопка обновится, но значение времени внутри блока с wire:ignore.self останется неизменным:

<div>
	<div class="ignored-box">
		Время: 2026-09-08 12:00:00
	</div>

	<button>
		Нажми меня (1)
	</button>
</div>

Пример

Директива wire:ignore.self позволяет обновлять внутренние элементы, но сам контейнер остается нетронутым. В этом примере внешний div игнорируется, но его содержимое обновляется:

<?php
	namespace App\Livewire;

	use Livewire\Component;

	class IgnoreSelfInner extends Component
	{
		public $counter = 0;

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

		public function render()
		{
			return view('livewire.ignore-self-inner');
		}
	}
?>

<div>
	<div wire:ignore.self class="outer-box">
		<span>Счетчик внутри: {{ $counter }}</span>
	</div>

	<button wire:click="increment">
		Увеличить
	</button>
</div>

После нажатия кнопки значение $counter внутри элемента обновится, так как дочерний элемент не защищен директивой:

<div>
	<div class="outer-box">
		<span>Счетчик внутри: 1</span>
	</div>

	<button>
		Увеличить
	</button>
</div>

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

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