Livewire 2.x クエリ文字列

コンポーネントの状態が変化したときに、ブラウザのクエリ文字列を更新できると便利な場合があります。

たとえば、「ポスト検索」コンポーネントを作成していて、クエリ文字列に現在の検索値を反映させたい場合は、以下のようにします。

https://your-app.com/search-posts?search=some-search-string

この方法により、ユーザーが戻るボタンを押すかページをブックマークすると、コンポーネントを毎回リセットせずとも、クエリ文字列から初期状態を取得できます。

このような場合、プロパティの名前をprotected $queryStringへ追加します。Livewireはプロパティ値が変更されるたびにクエリ文字列を更新し、クエリ文字列が変更されるとプロパティを更新します。

class SearchPosts extends Component
{
    public $search;

    protected $queryString = ['search'];

    public function render()
    {
        return view('livewire.search-posts', [
            'posts' => Post::where('title', 'like', '%'.$this->search.'%')->get(),
        ]);
    }
}

<div>
    <input wire:model="search" type="search" placeholder="Search posts by title...">

    <h1>Search Results:</h1>

    <ul>
        @foreach($posts as $post)
            <li>{{ $post->title }}</li>
        @endforeach
    </ul>
</div>

クエリ文字列をきれいに保つ

上記で検索プロパティが空の場合、クエリ文字列は次のようになります。

?search=

他のケースでは、デフォルト設定でない場合にのみ、クエリ文字列で値を表現したい場合もあるでしょう。

たとえば、コンポーネントの中でペジネーションを追跡するための$pageプロパティがある場合、ユーザーが最初のページにいるときにはクエリ文字列からpageプロパティを削除したいでしょう。

このような場合、次の構文を使用してください。

class SearchPosts extends Component
{
    public $foo;
    public $search = '';
    public $page = 1;

    protected $queryString = [
        'foo',
        'search' => ['except' => ''],
        'page' => ['except' => 1],
    ];

    ...
}