Поле attributes

Поле attributes класса Component предоставляет доступ к коллекции атрибутов, которые будут применены к корневому элементу шаблона компонента. Это поле позволяет динамически управлять атрибутами напрямую из PHP-кода.

Оно доступно в любом методе компонента и может быть использовано для добавления, удаления или изменения атрибутов перед рендерингом.

Синтаксис

Обращение к полю происходит через $this->attributes. Для добавления атрибута используется метод merge:

<?php
	$this->attributes->merge(['class' => 'active']);
?>

Для получения значения атрибута используется метод get:

<?php
	$class = $this->attributes->get('class');
?>

Пример

Давайте добавим динамический класс к корневому элементу компонента на основе значения свойства $isActive:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Button extends Component
	{
		public $isActive = true;
		
		public function toggle()
		{
			$this->isActive = !$this->isActive;
			
			if ($this->isActive) {
				$this->attributes->merge(['class' => 'active']);
			} else {
				$this->attributes->merge(['class' => 'inactive']);
			}
		}
		
		public function render()
		{
			if ($this->isActive) {
				$this->attributes->merge(['class' => 'active']);
			} else {
				$this->attributes->merge(['class' => 'inactive']);
			}
			
			return view('livewire.button');
		}
	}
?>

<div>
	<button wire:click="toggle">
		Toggle
	</button>
	<div {{ $attributes }}>
		Status: {{ $isActive ? 'Active' : 'Inactive' }}
	</div>
</div>

После первого клика на кнопку:

<div>
	<button>
		Toggle
	</button>
	<div class="inactive">
		Status: Inactive
	</div>
</div>

Пример

Давайте добавим несколько атрибутов одновременно с помощью массива:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class Card extends Component
	{
		public $type = 'primary';
		
		public function setType($type)
		{
			$this->type = $type;
			
			$this->attributes->merge([
				'class' => 'card card-' . $type,
				'data-type' => $type,
				'id' => 'card-' . $type,
			]);
		}
		
		public function render()
		{
			$this->attributes->merge([
				'class' => 'card card-' . $this->type,
				'data-type' => $this->type,
				'id' => 'card-' . $this->type,
			]);
			
			return view('livewire.card');
		}
	}
?>

<div>
	<button wire:click="setType('secondary')">
		Set Secondary
	</button>
	<div {{ $attributes }}>
		Card content
	</div>
</div>

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

<div>
	<button>
		Set Secondary
	</button>
	<div class="card card-secondary" data-type="secondary" id="card-secondary">
		Card content
	</div>
</div>

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

поле id,
которое определяет уникальный идентификатор компонента
поле slot,
которое управляет содержимым слотов компонента
поле attributes,
которое отвечает за передачу HTML-атрибутов корневому элементу
метод render,
который отрисовывает шаблон компонента