Свойство queryString

Свойство queryString в классе компонента Livewire определяет, какие публичные свойства должны синхронизироваться с параметрами строки запроса URL. При изменении свойства компонента автоматически обновляется URL-адрес, и наоборот - при изменении параметра URL обновляется свойство компонента.

Свойство queryString должно быть определено как массив, где ключами могут быть имена свойств, а значениями - настройки синхронизации. Если значения не указаны, то Livewire использует настройки по умолчанию.

Синтаксис

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class PostIndex extends Component
	{
		public $search = '';
		public $category = 'all';
		public $sort = 'asc';
		
		protected $queryString = ['search', 'category'];
		
		public function render()
		{
			return view('livewire.post-index');
		}
	}
?>

Базовый пример

Рассмотрим простой пример поиска постов с синхронизацией свойства $search с параметром URL search:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class PostIndex extends Component
	{
		public $search = '';
		
		protected $queryString = ['search'];
		
		public function render()
		{
			$posts = Post::query()
				->where('title', 'like', "%{$this->search}%")
				->get();
			
			return view('livewire.post-index', ['posts' => $posts]);
		}
	}
?>

<div>
	<input type="text" wire:model.live="search" placeholder="Search...">
	
	<ul>
		@foreach ($posts as $post)
			<li>{{ $post->title }}</li>
		@endforeach
	</ul>
</div>

При вводе текста в поле поиска свойство $search будет обновляться, и в URL автоматически появится параметр ?search=введенный_текст. Также при загрузке страницы с таким параметром компонент автоматически выполнит поиск.

Синхронизация нескольких свойств

Давайте синхронизируем два свойства $category и $sort:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class ProductList extends Component
	{
		public $category = 'all';
		public $sort = 'asc';
		
		protected $queryString = ['category', 'sort'];
		
		public function filterByCategory($category)
		{
			$this->category = $category;
		}
		
		public function toggleSort()
		{
			$this->sort = $this->sort === 'asc' ? 'desc' : 'asc';
		}
		
		public function render()
		{
			$products = Product::query()
				->when($this->category !== 'all', function ($q) {
					$q->where('category', $this->category);
				})
				->orderBy('price', $this->sort)
				->get();
			
			return view('livewire.product-list', ['products' => $products]);
		}
	}
?>

<div>
	<div>
		<button wire:click="filterByCategory('all')">All</button>
		<button wire:click="filterByCategory('electronics')">Electronics</button>
		<button wire:click="filterByCategory('books')">Books</button>
	</div>
	
	<button wire:click="toggleSort">Sort: {{ $sort }}</button>
	
	<ul>
		@foreach ($products as $product)
			<li>{{ $product->name }} - ${{ $product->price }}</li>
		@endforeach
	</ul>
</div>

Теперь при выборе категории или сортировке URL будет обновляться с параметрами ?category=electronics&sort=desc.

Настройка ключей параметров

Можно указать другое имя параметра URL с помощью ключа as:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class UserList extends Component
	{
		public $searchTerm = '';
		
		protected $queryString = [
			'searchTerm' => ['as' => 'q']
		];
		
		public function render()
		{
			return view('livewire.user-list');
		}
	}
?>

Теперь свойство $searchTerm будет синхронизироваться с параметром URL q, а не searchTerm.

История и состояние

С помощью ключа history можно управлять записью в истории браузера:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class FilterComponent extends Component
	{
		public $page = 1;
		public $limit = 20;
		
		protected $queryString = [
			'page' => ['history' => true],
			'limit' => ['history' => false]
		];
		
		public function render()
		{
			return view('livewire.filter-component');
		}
	}
?>

Параметр page будет создавать записи в истории браузера, а limit - нет.

Свойства с объектами и массивами

Livewire поддерживает синхронизацию массивов с URL-параметрами. Для этого используется ключ keep:

<?php
	namespace AppLivewire;
	
	use LivewireComponent;
	
	class AdvancedFilter extends Component
	{
		public $filters = ['category' => 'all', 'price' => 'low'];
		
		protected $queryString = [
			'filters' => ['keep' => true]
		];
		
		public function render()
		{
			return view('livewire.advanced-filter');
		}
	}
?>

Теперь массив $filters будет сериализован в URL-параметр в формате JSON.

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

трейт WithPagination,
который добавляет пагинацию в компонент
метод withQueryString,
который сохраняет параметры запроса при пагинации
метод resetPage,
который сбрасывает текущую страницу пагинации
класс WithoutUrlPagination,
который отключает URL-параметры пагинации