Livewire 2.x プロパティ

{video} 細かに説明したスクリーンキャストを用意している、Livewireに驚いてください

イントロダクション

Livewireコンポーネントはコンポーネントクラスのパブリックプロパティとして、データを保存および追跡します。

class HelloWorld extends Component
{
    public $message = 'Hello World!';
    ...

Livewireのパブリックプロパティは、自動的にビューで利用可能になります。ビューに明示的に渡す必要はありません。(必要に応じ、渡すこともできます。)

class HelloWorld extends Component
{
    public $message = 'Hello World!';
}
<div>
    <h1>{{ $message }}</h1>
    <!-- "Hello World!"が出力される -->
</div>

重要な注意点

Livewireの旅へ出る前に、パブリックプロパティに関して注意すべき3つの重要事項を次に示します。

  1. プロパティ名は、Livewireで予約されているプロパティ名(例:rulesmessages)と衝突してはいけません。
  2. パブリックプロパティに保存したデータは、フロントエンドのJavaScriptで表示可能になります。そのため、機密性の高いデータは保存しないでください。
  3. プロパティは、JavaScriptに適したデータ型(stringintarrayboolean)、もしくは以降のPHPタイプのいずれかのみです。StringableCollectionDateTimeModelEloquentCollection

{note} protectedprivateプロパティは、Livewireの更新で維持されません。一般に、状態を保存するためにこれらを使用するのは避けるべきでしょう。

プロパティの初期化

コンポーネントのmountメソッドを使用し、プロパティを初期化できます。

class HelloWorld extends Component
{
    public $message;

    public function mount()
    {
        $this->message = 'Hello World!';
    }
}

Livewireは多くのプロパティを設定する必要があり、視覚的なノイズを除去したい場合に使える、$this->fill()メソッドも提供しています。

public function mount()
{
    $this->fill(['message' => 'Hello World!']);
}

さらに、パブリックプロパティ値をプログラムで初期状態にリセットできるよう、Livewireは$this->reset()を提供しています。これは、アクションの実行後に入力フィールドをクリーンアップする場合に便利です。

public $search = '';
public $isActive = true;

public function resetFilters()
{
    $this->reset('search');
    // searchプロパティのみリセット

    $this->reset(['search', 'isActive']);
    // searchとisActiveプロパティの両方をリセット
}

データ結合

VueやAngularなどのフロントエンドフレームワークを使用したことがある場合は、すでにこの概念はおなじみでしょう。しかし、もしこうした概念に慣れていなければ、Livewireはコンポーネントの特定のプロパティへ、一部のHTML要素の現在値を「結合」(または「同期」)できると理解してください。

class HelloWorld extends Component
{
    public $message;
}
<div>
    <input wire:model="message" type="text">

    <h1>{{ $message }}</h1>
</div>

ユーザーがテキストフィールドに何かを入力すると、$messageプロパティの値が自動的に更新されます。

内部的にLivewireは要素の「入力」イベントをリッスンし、トリガーが起きると、AJAXリクエストを送信し、コンポーネントを新しいデータで再レンダーリングします。

{tip} inputイベントをディスパッチする任意の要素にwire:modelを追加できます。カスタム要素、またはサードパーティのJavaScriptライブラリでも可能です。

wire:modelを使用する一般的な要素は以下のとおりです。

要素タグ
<input type="text">
<input type="radio">
<input type="checkbox">
<select>
<textarea>

ネストしたデータの結合

Livewireはドット記法による配列内のネストしたデータへの結合をサポートしています。

<input type="text" wire:model="parent.message">

入力のデバウンス

デフォルトでLivewireは、テキスト入力に150msのデバウンスを適用します。これにより、ユーザーがテキストフィールドに入力するときに送信されるネットワークリクエストが多くなりすぎるのを防いでいます。

このデフォルトをオーバーライド(またはテキスト以外の入力へ追加)したい場合のために、Livewireは"debounce"修飾子を提供します。入力に0.5秒のデバウンスを適用する場合は、以下のように修飾子を指定します。

<input type="text" wire:model.debounce.500ms="name">

レイジーな更新

デフォルトでは、Livewireはすべてのinputイベント(ある場合によってはchange)の後に、サーバーにリクエストを送信します。これは通常、高速に更新しない<select>要素のようなものには問題ありませんが、ユーザーのタイピングに応じて更新されるテキストフィールドには不必要なことがよく起きます。

そのような場合は、lazyディレクティブ修飾子を使用して、ネイティブのchangeイベントをリッスンします。

<input type="text" wire:model.lazy="message">

これで、$messageプロパティは、ユーザーがこの入力フィールドから離れるクリックをしたときにのみ更新されます。

遅延更新

リアルタイムにデータの更新を行う必要がない場合、Livewireには次のネットワークリクエストでデータの更新をバッチ処理する.defer修飾子があります。

たとえば、次のコンポーネントがあるとします。

<input type="text" wire:model.defer="query">
<button wire:click="search">Search</button>

ユーザーが<input>フィールドへタイピングしても、ネットワークリクエストは送信されません。ユーザーがページ上の他のフィールドをクリックし、入力フィールドから離れてもリクエストは送信されません。

ユーザーが"Search"を押すと、Livewireは新しい"query"状態検索を実行するための"search"アクションの両方を含むネットワーク要求を1つ送信します。

これにより、不要な場合のネットワーク使用量を大幅に削減できます。

モデルプロパティへの直接バインド

EloquentモデルがLivewireコンポーネントのパブリックプロパティとして保存されている場合は、そのプロパティに直接結合できます。コンポーネントの一例をご覧ください。

use App\Post;

class PostForm extends Component
{
    public Post $post;

    protected $rules = [
        'post.title' => 'required|string|min:6',
        'post.content' => 'required|string|max:500',
    ];

    public function save()
    {
        $this->validate();

        $this->post->save();
    }
}
<form wire:submit.prevent="save">
    <input type="text" wire:model="post.title">

    <textarea wire:model="post.content"></textarea>

    <button type="submit">Save</button>
</form>

上記のコンポーネントでは、"title"および"content"モデル属性を直接結合していることに注意してください。Livewireは、現在の非永続データを使用して、リクエスト間のモデルのハイドレーションとデハイドレーションを処理します。

{note} これを機能させるには、結合したいモデル属性に対するバリデーションエントリを$rulesプロパティに用意します。これをしない場合はエラーが投げられます。

さらに、Eloquentコレクション内のモデルにも結合できます。

use App\Post;

class PostForm extends Component
{
    public $posts;

    protected $rules = [
        'posts.*.title' => 'required|string|min:6',
        'posts.*.content' => 'required|string|max:500',
    ];

    public function mount()
    {
        $this->posts = auth()->user()->posts;
    }

    public function save()
    {
        $this->validate();

        foreach ($this->posts as $post) {
            $post->save();
        }
    }
}
<form wire:submit.prevent="save">
    @foreach ($posts as $index => $post)
        <div wire:key="post-field-{{ $post->id }}">
            <input type="text" wire:model="posts.{{ $index }}.title">

            <textarea wire:model="posts.{{ $index }}.content"></textarea>
        </div>
    @endforeach

    <button type="submit">Save</button>
</form>

Livewirは、Eloquentモデルのリレーションのバインドもサポートしています。

class EditUsersPosts extends Component
{
    public User $user;

    protected $rules = [
        'user.posts.*.title'
    ];

    public function save()
    {
        $this->validate();

        $this->user->posts->each->save();
    }
}
<div>
    @foreach ($user->posts as $i => $post)
        <input type="text" wire:model="user.posts.{{ $i }}.title" />

        <span class="error">
            @error('user.posts.{{ $i }}.title') {{ $message }} @enderror
        </span>
    @endforeach

    <button wire:click="save">Save</button>
</div>

算出プロパティ

Livewireは、動的プロパティにアクセスするためのAPIを提供します。これは、データベースやキャッシュなどの別の永続ストアからプロパティを取得する場合にとくに役立ちます。

class ShowPost extends Component
{
    // 算出プロパティ
    public function getPostProperty()
    {
        return Post::find($this->postId);
    }

これで、コンポーネントのクラスまたはブレードビューから$this->postにアクセスできます。

class ShowPost extends Component
{
    public $postId;

    public function getPostProperty()
    {
        return Post::find($this->postId);
    }

    public function deletePost()
    {
        $this->post->delete();
    }
}
<div>
    <h1>{{ $this->post->title }}</h1>
    ...
    <button wire:click="deletePost">Delete Post</button>
</div>

{tip} 算出プロパティは、個々のLivewireリクエストライフサイクルごとにキャッシュされます。つまり、コンポーネントのBladeビューで$this->postを5回呼び出しても、毎回個別のデータベースクエリが作成されるわけではありません。

ドキュメント章別ページ

ヘッダー項目移動

注目:アイコン:ページ内リンク設置(リンクがないヘッダーへの移動では、リンクがある以前のヘッダーのハッシュを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)へ移動

その他

?

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