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

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

Синтаксис

<button wire:loading.attr="disabled">
	Save
</button>

В этом примере во время загрузки кнопка будет заблокирована через атрибут disabled.

Пример

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

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class SaveButton extends Component
	{
		public $status = '';

		public function save()
		{
			sleep(2);
			$this->status = 'Saved successfully!';
		}

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

<button wire:click="save" wire:loading.attr="disabled">
	Save Data
</button>
<p wire:loading.remove>Click the button to save</p>
<p>{{ $status }}</p>

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

<button>Save Data</button>
<p>Click the button to save</p>

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

<button disabled>Save Data</button>

Пример

Изменим стиль элемента во время загрузки, добавив атрибут style:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class FormSubmit extends Component
	{
		public $message = '';

		public function submit()
		{
			sleep(3);
			$this->message = 'Form submitted!';
		}

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

<button 
	wire:click="submit" 
	wire:loading.attr="style:opacity:0.5"
>
	Submit Form
</button>
<span>{{ $message }}</span>

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

<button style="opacity:0.5">Submit Form</button>

Пример

Используем директиву с модификатором .remove, чтобы удалить атрибут во время загрузки:

<?php
	namespace AppLivewire;

	use LivewireComponent;

	class EditData extends Component
	{
		public $data = 'Original data';

		public function update()
		{
			sleep(2);
			$this->data = 'Updated data';
		}

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

<a 
	href="#" 
	wire:click.prevent="update" 
	wire:loading.attr.remove="href"
>
	Update Data
</a>
<p>{{ $data }}</p>

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

<a>Update Data</a>

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

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