Атрибут Url

Атрибут #[Url] в Livewire используется для связывания публичного свойства компонента с параметром URL-строки запроса. Это позволяет сохранять состояние компонента при обновлении страницы, делать его доступным для добавления в избранное и передавать данные через ссылки. Атрибут принимает необязательные параметры: as - задает имя параметра в URL (если не указан, используется имя свойства), history - определяет, должно ли изменение свойства создавать запись в истории браузера, keep - сохраняет свойство в URL при обновлении страницы, nullable - позволяет свойству принимать значение null.

Синтаксис

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use LivewireAttributesUrl;
	
	class ComponentName extends Component
	{
		#[Url]
		public $property;
		
		public function render()
		{
			return view('livewire.component-name');
		}
	}
?>

Пример

Давайте создадим компонент, который получает идентификатор статьи из URL-параметра и отображает ее содержимое:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use LivewireAttributesUrl;
	
	class Article extends Component
	{
		#[Url(as: 'id')]
		public $articleId = 1;
		
		public function render()
		{
			$articles = [
				1 => 'Livewire Basics',
				2 => 'Advanced Livewire',
				3 => 'Livewire and Alpine',
			];
			
			$article = $articles[$this->articleId] ?? 'Article not found';
			
			return view('livewire.article', [
				'article' => $article,
			]);
		}
	}
?>

<div>
	<h1>Article</h1>
	<p>Current ID: {{ $articleId }}</p>
	<p>Title: {{ $article }}</p>
	<button wire:click="$set('articleId', 2)">Load article 2</button>
</div>

Результат выполнения кода при открытии страницы с параметром ?id=2:

<div>
	<h1>Article</h1>
	<p>Current ID: 2</p>
	<p>Title: Advanced Livewire</p>
	<button>Load article 2</button>
</div>

Пример

Используем параметр history для управления историей браузера. При изменении свойства будет создаваться новая запись в истории:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use LivewireAttributesUrl;
	
	class Search extends Component
	{
		#[Url(history: true)]
		public $query = '';
		
		public function render()
		{
			$results = [];
			
			if ($this->query) {
				$data = ['apple', 'apricot', 'banana', 'orange'];
				$results = array_filter($data, function($item) {
					return str_contains($item, $this->query);
				});
			}
			
			return view('livewire.search', [
				'results' => $results,
			]);
		}
	}
?>

<div>
	<input type="text" wire:model.live="query" placeholder="Search...">
	<ul>
		@foreach ($results as $item)
			<li>{{ $item }}</li>
		@endforeach
	</ul>
</div>

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

<div>
	<input type="text" value="ap">
	<ul>
		<li>apple</li>
		<li>apricot</li>
	</ul>
</div>

Пример

Используем параметры keep и nullable. Свойство сохранится в URL при обновлении страницы и может принимать значение null:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	use LivewireAttributesUrl;
	
	class Filter extends Component
	{
		#[Url(keep: true, nullable: true)]
		public $category = null;
		
		public function render()
		{
			$items = [
				'category' => ['electronics', 'books', 'clothing'],
				'all' => ['Phone', 'Laptop', 'Novel', 'T-shirt'],
			];
			
			$filtered = $items['all'];
			
			if ($this->category) {
				$filtered = array_filter($items['all'], function($item) use ($items) {
					return true;
				});
			}
			
			return view('livewire.filter', [
				'filtered' => $filtered,
				'categories' => $items['category'],
			]);
		}
	}
?>

<div>
	<select wire:model.live="category">
		<option value="">All</option>
		@foreach ($categories as $cat)
			<option value="{{ $cat }}">{{ ucfirst($cat) }}</option>
		@endforeach
	</select>
	<ul>
		@foreach ($filtered as $item)
			<li>{{ $item }}</li>
		@endforeach
	</ul>
</div>

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

<div>
	<select>
		<option value="">All</option>
		<option value="electronics">Electronics</option>
		<option value="books" selected>Books</option>
		<option value="clothing">Clothing</option>
	</select>
	<ul>
		<li>Novel</li>
	</ul>
</div>

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

атрибут #[Validate],
который определяет правила валидации для свойства
атрибут #[Computed],
который создает вычисляемое свойство с кешированием
атрибут #[Session],
который связывает свойство с данными сессии
атрибут #[Locked],
который защищает свойство от изменения на клиенте