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

Директива wire:target используется в связке с другими директивами, чаще всего с wire:loading или wire:dirty. В значение передаётся имя свойства или метода компонента, которое нужно отслеживать. Это позволяет ограничить область действия директивы только указанным элементом.

Синтаксис

<div wire:loading wire:target="propertyName">
	Loading...
</div>

Пример

Давайте покажем индикатор загрузки при обновлении свойства $num:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Counter extends Component
	{
		public $num = 0;
		public $text = 'abcde';
		
		public function inc()
		{
			$this->num++;
		}
		
		public function render()
		{
			return view('livewire.counter');
		}
	}
?>

<div wire:loading wire:target="num">
	Updating num...
</div>
<button wire:click="inc">
	+
</button>
<span>{{ $num }}</span>

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

<div>
	Updating num...
</div>
<button>
	+
</button>
<span>1</span>

Пример

Давайте укажем несколько целей через запятую:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Counter extends Component
	{
		public $num = 0;
		public $text = 'abcde';
		
		public function updateNum()
		{
			$this->num++;
		}
		
		public function updateText()
		{
			$this->text = 'xyz';
		}
		
		public function render()
		{
			return view('livewire.counter');
		}
	}
?>

<div wire:loading wire:target="num, text">
	Updating...
</div>
<button wire:click="updateNum">
	Update num
</button>
<button wire:click="updateText">
	Update text
</button>
<span>{{ $num }} - {{ $text }}</span>

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

<div>
	Updating...
</div>
<button>
	Update num
</button>
<button>
	Update text
</button>
<span>1 - xyz</span>

Пример

Давайте используем wire:target для отслеживания метода:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class User extends Component
	{
		public $name = 'John';
		
		public function save()
		{
			sleep(1);
			$this->name = 'Mike';
		}
		
		public function render()
		{
			return view('livewire.user');
		}
	}
?>

<div wire:loading wire:target="save">
	Saving...
</div>
<button wire:click="save">
	Save
</button>
<span>{{ $name }}</span>

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

<div>
	Saving...
</div>
<button>
	Save
</button>
<span>Mike</span>

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

директиву wire:loading.target,
которая применяет wire:target к загрузке
директиву wire:dirty,
которая отслеживает изменения свойств
директиву wire:loading,
которая показывает индикатор загрузки
директиву wire:click,
которая обрабатывает клики по элементу