はじめに
環境
・Laravel 8.x
・Livewire 2.x
この過去記事と環境は同じです
【Laravel】Laravel-AdminLTEとlivewireを布教したい
livewireで非同期な検索機能を実装したとして、そのままだとURLにパラメータが無いので検索結果をURLで共有する事が出来ません。
livewireプロパティとURLパラメータを同期する方法があったので書きます。
queryStringプロパティ
例としてこのようなview側とphp側を用意します
app/Http/Livewire/Sample0303.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Sample0303 extends Component
{
public $search_word, $search_word2;
public function render()
{
return view('livewire.sample0303')
->extends('adminlte::page')
->section('content');
}
}
resources/views/livewire/sample0303.blade.php
<div>
@section('content_header')
<h1>検索</h1>
@stop
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-6">
<div class="row">
<x-adminlte-input name="search_word1" label="検索文字列1" value=""
fgroup-class="col-md-4" wire:model="search_word"/>
<x-adminlte-input name="search_word2" label="検索文字列2" value=""
fgroup-class="col-md-4" wire:model="search_word2"/>
</div>
</div>
</div>
</div>
</div>
</div>
この状態でフォームに値を入力してもURLは変わりません。
queryStringプロパティにURLのパラメータと同期させたいプロパティ名を書きます。
app/Http/Livewire/Sample0303.php
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class Sample0303 extends Component
{
public $search_word, $search_word2;
+ protected $queryString = ['search_word', 'search_word2'];
public function render()
{
return view('livewire.sample0303')
->extends('adminlte::page')
->section('content');
}
}
フォームに値を入力するとURLパラメータと同期されるようになりました。
同期のタイミングはwire:modelの修飾子と同じです。
何も書いていなければ入力と同時に、lazyならフォームからフォーカスが外れた時、など。
queryStringプロパティを設定していれば、/?search_word=test&search_word2=test2 にアクセスした場合、
search_word、search_word2プロパティに値がセットされた状態でページを開けます。
as構文でパラメータの表記名称を変更する事も出来ます
protected $queryString = [
'search_word' => ['as' => 's'],
'search_word2' => ['as' => 's2']
];
