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

Директива wire:bind:href вешается на элемент ссылки <a> и позволяет привязать атрибут href к публичному свойству компонента. В значение передаётся имя свойства, которое будет определять URL-адрес ссылки. При изменении связанного свойства Livewire автоматически обновляет атрибут href у элемента.

Синтаксис

<a wire:bind:href="propertyName">
	Link text
</a>

Пример

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

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class CategoryLink extends Component
	{
		public $category = 'electronics';
		
		public $categories = [
			'electronics' => 'Electronics',
			'books' => 'Books',
			'clothing' => 'Clothing'
		];
		
		public function render()
		{
			return view('livewire.category-link');
		}
	}
?>

<select wire:model.live="category">
	@foreach ($categories as $key => $label)
		<option value="{{ $key }}">{{ $label }}</option>
	@endforeach
</select>

<a wire:bind:href="'category/' . $category">
	Go to category: {{ $categories[$category] }}
</a>

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

<select>
	<option value="electronics">Electronics</option>
	<option value="books" selected>Books</option>
	<option value="clothing">Clothing</option>
</select>
<a href="category/books">
	Go to category: Books
</a>

Пример

А теперь создадим ссылку на профиль пользователя, где идентификатор пользователя привязан к свойству $userId:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class UserProfile extends Component
	{
		public $userId = 1;
		
		public function nextUser()
		{
			$this->userId++;
		}
		
		public function render()
		{
			return view('livewire.user-profile');
		}
	}
?>

<a wire:bind:href="'/profile/' . $userId">
	View profile #{{ $userId }}
</a>
<button wire:click="nextUser">
	Next user
</button>

Результат выполнения кода после двух нажатий на кнопку "Next user":

<a href="/profile/3">
	View profile #3
</a>
<button>
	Next user
</button>

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

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