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

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

Синтаксис

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

Пример

Давайте покажем индикатор загрузки только во время выполнения метода loadData, а не при любых других действиях:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class DataLoader extends Component
	{
		public $data = null;
		public $isLoaded = false;
		
		public function loadData()
		{
			sleep(2);
			$this->data = ['a', 'b', 'c', 'd', 'e'];
			$this->isLoaded = true;
		}
		
		public function resetData()
		{
			$this->data = null;
			$this->isLoaded = false;
		}
		
		public function render()
		{
			return view('livewire.data-loader');
		}
	}
?>

<div>
	<button wire:click="loadData">
		Load Data
	</button>
	<button wire:click="resetData">
		Reset
	</button>
	
	<div wire:loading.target="loadData">
		Loading data...
	</div>
	
	@if ($data)
		<div>
			Data: {{ implode(', ', $data) }}
		</div>
	@endif
</div>

Результат выполнения кода (после клика на Load Data):

<button>
	Load Data
</button>
<button>
	Reset
</button>
<div>
	Loading data...
</div>
<div>
	Data: a, b, c, d, e
</div>

Пример

Можно указать несколько целей через запятую. Покажем индикатор загрузки при выполнении методов loadData или processData:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class DataProcessor extends Component
	{
		public $status = 'ready';
		
		public function loadData()
		{
			sleep(2);
			$this->status = 'loaded';
		}
		
		public function processData()
		{
			sleep(3);
			$this->status = 'processed';
		}
		
		public function resetStatus()
		{
			$this->status = 'ready';
		}
		
		public function render()
		{
			return view('livewire.data-processor');
		}
	}
?>

<div>
	<button wire:click="loadData">
		Load
	</button>
	<button wire:click="processData">
		Process
	</button>
	<button wire:click="resetStatus">
		Reset
	</button>
	
	<div wire:loading.target="loadData, processData">
		Processing...
	</div>
	
	<div>Status: {{ $status }}</div>
</div>

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

<button>
	Load
</button>
<button>
	Process
</button>
<button>
	Reset
</button>
<div>
	Processing...
</div>
<div>
	Status: processed
</div>

Пример

Также можно использовать селекторы элементов в качестве цели. Покажем загрузку при клике на конкретную кнопку:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ButtonLoader extends Component
	{
		public $message = 'Waiting...';
		
		public function loadFromButton()
		{
			sleep(2);
			$this->message = 'Loaded!';
		}
		
		public function loadFromOther()
		{
			sleep(2);
			$this->message = 'Other action!';
		}
		
		public function render()
		{
			return view('livewire.button-loader');
		}
	}
?>

<div>
	<button wire:click="loadFromButton" id="main-btn">
		Main Button
	</button>
	<button wire:click="loadFromOther">
		Other Button
	</button>
	
	<div wire:loading.target="#main-btn">
		Loading from main button...
	</div>
	
	<div>{{ $message }}</div>
</div>

Результат выполнения кода (после клика на Main Button):

<button id="main-btn">
	Main Button
</button>
<button>
	Other Button
</button>
<div>
	Loading from main button...
</div>
<div>
	Loaded!
</div>

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

директиву wire:loading,
которая управляет отображением элементов в состоянии загрузки
директиву wire:loading.delay,
которая добавляет задержку перед показом состояния загрузки
директиву wire:loading.class,
которая добавляет CSS-класс во время загрузки
директиву wire:target,
которая ограничивает область действия других директив