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="text" 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],
    ];

    public function mount()
    {
        $this->fill(request()->only('search', 'page'));
    }

    ...
}

ドキュメント章別ページ

ヘッダー項目移動

注目:アイコン:ページ内リンク設置(リンクがないヘッダーへの移動では、リンクがある以前のヘッダーのハッシュをURLへ付加します。

移動

クリックで即時移動します。

言語
バージョン

設定

適用ボタンクリック後に、全項目まとめて適用されます。

カラーテーマ
和文指定 Pagination
和文指定 Scaffold
Largeスクリーン表示幅
インデント
本文フォント
コードフォント
フォント適用確認

フォントの指定フィールドから、フォーカスが外れると、当ブロックの内容に反映されます。EnglishのDisplayもPreviewしてください。

フォント設定時、表示に不具合が出た場合、当サイトのクッキーを削除してください。

バックスラッシュを含むインライン\Code\Blockの例です。

以下はコードブロックの例です。

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    /**
     * ユーザに関連する電話レコードを取得
     */
    public function phone()
    {
        return $this->hasOne('App\Phone');
    }
}

設定を保存する前に、表示が乱れないか必ず確認してください。CSSによるフォントファミリー指定の知識がない場合は、フォントを変更しないほうが良いでしょう。

キーボード・ショートカット

オープン操作

PDC

ページ(章)移動の左オフキャンバスオープン

HA

ヘッダー移動モーダルオープン

MS

移動/設定の右オフキャンバスオープン

ヘッダー移動

T

最初のヘッダーへ移動

E

最後のヘッダーへ移動

NJ

次ヘッダー(H2〜H4)へ移動

BK

前ヘッダー(H2〜H4)へ移動

その他

?

このヘルプページ表示
閉じる