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

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

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

Синтаксис

<div wire:replace>
	{{ $content }}
</div>

Пример ⁅i⁠d="ex1"⁆

Давайте создадим компонент, который при клике на кнопку изменяет свойство $text. Без директивы wire:replace обновляется только содержимое элемента:

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

<div>
	<div id="my-div">
		{{ $text }}
	</div>
	<button wire:click="updateText">
		Update
	</button>
</div>

Пример ⁅i⁠d="ex2"⁆

Теперь добавим директиву wire:replace к элементу. При обновлении весь элемент будет заменяться полностью:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class TextComponent extends Component
	{
		public $text = 'Initial text';
		public $class = 'old-class';
		
		public function updateText()
		{
			$this->text = 'Updated text';
			$this->class = 'new-class';
		}
		
		public function render()
		{
			return view('livewire.text-component');
		}
	}
?>

<div>
	<div id="my-div" wire:replace class="{{ $class }}">
		{{ $text }}
	</div>
	<button wire:click="updateText">
		Update
	</button>
</div>

Пример ⁅i⁠d="ex3"⁆

Директива wire:replace особенно полезна при работе с элементами, у которых могут изменяться атрибуты. В этом примере меняется атрибут href ссылки:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class LinkComponent extends Component
	{
		public $url = 'https://example.com';
		public $label = 'Example';
		
		public function changeLink()
		{
			$this->url = 'https://laravel.com';
			$this->label = 'Laravel';
		}
		
		public function render()
		{
			return view('livewire.link-component');
		}
	}
?>

<div>
	<a wire:replace href="{{ $url }}">
		{{ $label }}
	</a>
	<button wire:click="changeLink">
		Change link
	</button>
</div>

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

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