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

Директива wire:bind вешается на HTML-элемент и связывает значение указанного атрибута с публичным свойством компонента Livewire. В отличие от wire:model, которая работает со значением поля ввода, wire:bind позволяет привязывать любые атрибуты, такие как class, style, href, disabled и другие. При изменении свойства в компоненте автоматически обновляется соответствующий атрибут элемента.

Синтаксис

<div wire:bind.attr="propertyName">
	...
</div>

Пример

Давайте свяжем CSS-класс элемента со свойством компонента $isActive:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ExampleComponent extends Component
	{
		public $isActive = true;
		
		public function toggle()
		{
			$this->isActive = !$this->isActive;
		}
		
		public function render()
		{
			return view('livewire.example-component');
		}
	}
?>

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

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

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

Пример

Давайте свяжем атрибут disabled кнопки со свойством компонента $isDisabled:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ButtonComponent extends Component
	{
		public $isDisabled = false;
		
		public function enable()
		{
			$this->isDisabled = true;
		}
		
		public function render()
		{
			return view('livewire.button-component');
		}
	}
?>

<button wire:bind.disabled="isDisabled" wire:click="enable">
	Click me
</button>
<p>Disabled: {{ $isDisabled ? 'Yes' : 'No' }}</p>

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

<button disabled>
	Click me
</button>
<p>Disabled: Yes</p>

Пример

Давайте свяжем URL ссылки со свойством компонента $link с помощью атрибута href:

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

<a wire:bind.href="link">
	Visit site
</a>
<button wire:click="updateLink">
	Update link
</button>

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

<a href="https://code.mu">
	Visit site
</a>
<button>
	Update link
</button>

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

директиву wire:model,
которая привязывает значение поля ввода к свойству компонента
директиву wire:bind.class,
которая привязывает CSS-класс к свойству компонента
директиву wire:bind.style,
которая привязывает CSS-стиль к свойству компонента
директиву wire:bind.disabled,
которая привязывает атрибут disabled к свойству компонента