Livewire 2.x リファレンス

すでにLivewireに精通しており、長いドキュメントは不要ですか?では、Livewireで利用可能なすべてを網羅した巨大なリストをご覧ください。

テンプレートディレクティブ

これらは、Livewireコンポーネントテンプレート内の要素に追加されるディレクティブです。

<button wire:click="save">...</button>
ディレクティブ 説明
wire:key="foo" LivewireのDOM差分システムの参照ポイントとして機能します。要素の追加/削除に役立ち、リストを追跡します。
wire:click="foo" clickイベントをリッスンし、コンポーネントの中でfooメソッドを起動します。
wire:click.prefetch="foo" mouseenterイベントをリッスンし、コンポーネントのfooメソッドの結果を「プリフェッチ」します。次に、クリックされた場合、(追加のリクエストなしで)「プリフェッチされた」結果をスワップインします。クリックされなかった場合、キャッシュされた結果を破棄します。
wire:keydown.enter="foo" コンポーネントのfooメソッドを起動するenterキーのキーダウンイベントをリッスンします。
wire:foo="bar" 名前がfooであるブラウザイントをリッスンします。(Livewireによって発生したイベントだけでなく、任意のブラウザDOMイベントをリッスンできます)。
wire:model="foo" $fooがコンポーネントクラスのパブリックプロパティであると仮定し、このディレクティブを持つ入力要素が更新されるたびに、プロパティをその値と同期します。
wire:model.debounce.100ms="foo" この要素が発行したinputイベントを100ミリ秒ごとにデバウンスします。
wire:model.lazy="foo" 静止時に入力を対応するコンポーネントプロパティと遅延同期します。
wire:model.defer="foo" "action"が実行されるまで、入力をLivewireプロパティと同期するのを延期します。これにより、サーバーとのラウンドトリップが大幅に節約されます。
wire:poll.500ms="foo" 500ミリ秒ごとにコンポーネントクラスで"foo"メソッドを実行します。
wire:init="foo" コンポーネントがページにレンダリングされた直後に、コンポーネントに対して"foo"メソッドを実行します。
wire:loading デフォルトで要素を非表示にし、ネットワークリクエストの転送中に、要素を表示します。
wire:loading.class="foo" ネットワークリクエストの転送中、要素へfooクラスを追加します。
wire:loading.class.remove="foo" ネットワークリクエストの転送中、fooクラスを削除します。
wire:loading.attr="disabled" ネットワークリクエストの転送中、disabled="true"属性を追加します。
wire:dirty デフォルトで要素を非表示にし、要素の状態が「ダーティ」(バックエンドに存在するものとは異なる)の間、要素を表示します。
wire:dirty.class="foo" ダーティのとき、要素にfooクラスを追加します。
wire:dirty.class.remove="foo" 要素がダーティのときにfooクラスを削除します。
wire:dirty.attr="disabled" 要素がダーティのときに disabled="true"属性を追加します。
wire:target="foo" wire:loadingおよびwire:dirty機能を特定のアクションにスコープします。
wire:ignore サーバーリクエストでDOMが更新されるときに、要素またはその子を更新しないようにLivewireに指示します。Livewireコンポーネント内でサードパーティのJavaScriptライブラリを使用する場合に便利です。
wire:ignore.self "self"修飾子は、要素自体の更新を制限しますが、その子の変更は許可します。

Alpineコンポーネントオブジェクト($wire)

これらは、Livewireテンプレート内のAlpineコンポーネントに提供される$wireオブジェクトで使用可能なメソッドとプロパティです。完全なドキュメントを参照してください。

<div x-data>
    <span x-show="$wire.showMessage">...</span>

    <button x-on:click="$wire.toggleShowMessage()">...</button>
</div>
API 説明
$wire.foo Livewireコンポーネントの"foo"プロパティの値を取得します。
$wire.foo = 'bar' Livewireコンポーネントの"foo"プロパティの値を設定します。
$wire.bar(..args) Livewireコンポーネントで(パラメーターを使用して)"bar"メソッドを呼び出します。
let baz = await $wire.bar(..args) "bar"メソッドを呼び出しますが、レスポンスを待ってbazを設定します。
$wire.on('foo', (..args) => {}) "foo"イベントが発生したときに関数を呼び出します。
$wire.emit('foo', ...args) すべてのLivewireコンポーネントに"foo"イベントを発行します。
$wire.emitUp('foo', ...args) 親コンポーネントに"foo"イベントを発行します。
$wire.emitSelf('foo', ...args) このコンポーネントにのみ"foo"イベントを発行します。
$wire.get('foo') "foo"プロパティを取得します。
$wire.set('foo', 'bar') コンポーネントに"foo"プロパティをセットします。
$wire.call('foo', ..args) コンポーネントでパラメータを使用して"foo"メソッドを呼び出します。
x-data="{ foo: $wire.entangle('foo') }" LivewireとAlpineの間で"foo"の値を絡ませます。
$wire.entangle('foo').defer 次回Livewireリクエストが発生したときにのみ、Livewireの"foo"を更新します。

グローバルなLivewire JavaScriptオブジェクト

以下はフロントエンドのwindow.Livewireオブジェクトで使用可能なメソッドです。これらは、Livewireと深く相互に関わり、カスタマイズするためのものです。

メソッド 説明
Livewire.first() ページ上の最初のLivewireコンポーネントのJSオブジェクトを取得します。
Livewire.find(componentId) IDでLivewireコンポーネントを取得します。
Livewire.all() ページ上のすべてのLivewireコンポーネントを取得します。
Livewire.directive(directiveName, (el, directive, component) => {}) 新しいLivewireディレクティブを登録します。(wire:custom-directive
Livewire.hook(hookName, (...) => {}) JSライフサイクルフックが起動されたときに、メソッドを呼び出します。詳細を読む
Livewire.onLoad(() => {}) Livewireが最初にページへの読み込みを完了したときに実行します
Livewire.onError((message, statusCode) => {}) Livewireリクエストが失敗したときに実行します。Livewireのデフォルトの動作を防ぐために、コールバックからreturn falseを返すことができます。
Livewire.emit(eventName, ...params) ページをリッスンしているすべてのLivewireコンポーネントにイベントを発行します。
Livewire.emitTo(componentName, eventName, ...params) 名前を指定してコンポーネントにイベントを発行します。
Livewire.on(eventName, (...params) => {}) コンポーネントから発行されるイベントをリッスンします。
Livewire.start() ページ上でLivewireを起動します。(@livewireScriptsを介して自動的に実行されます。)
Livewire.stop() ページからLivewireを分解します。
Livewire.restart() 停止してから、ページでLivewireを開始します。
Livewire.rescan() 新しく追加されたLivewireコンポーネントのDOMを再スキャンします。

JavaScriptフック

以下はJavaScriptでリッスンできる「フック」です。これらを使用すると、LivewireコンポーネントのJavaScriptライフサイクルの特定の部分にフックして、サードパーティのパッケージや詳細なカスタマイズを行うことができます。ここでもたらされる能力は計り知れません。Livewireコアの重要な部分は、これらのフックを使用して機能を提供しています。

Livewire.hook('component.initialized', component => {
    //
})
名前 パラ メータ 説明
component.initialized (component) 新しいコンポーネントを初期化しました。
element.initialized (el, component) 新しい要素を初期化しました。
element.updating (fromEl, toEl, component) Livewireリクエスト後に要素が更新されようとしています。
element.updated (el, component) Livewireリクエストにより要素を更新しました。
element.removed (el, component) Livewireリクエスト後に要素を削しました。
message.sent (message, component) 新しいLivewireメッセージをサーバーに送信しました。
message.failed (message, component) Livewire ajaxリクエスト(メッセージ)が失敗しました。
message.received (message, component) メッセージを受信しました。(ただし、DOMには影響ありません。)
message.processed (message, component) メッセージを完全に受信し、実装されました(DOMの更新など…)

コンポーネントクラスのライフサイクルフック

これらは、バックエンドのライフサイクルの特定の時点で、コードを実行するためにLivewireコンポーネントクラスで宣言できるメソッドです。完全なドキュメントを読む

class ShowPost extends Component
{
    public function mount()
    {
        //
    }
}
名前 説明
mount(...$params) Livewireコンポーネントが新しくなったときに呼び出します。(コンストラクタのように考えてください。)
hydrate() コンポーネントがハイドレイトされた後、他のアクションが発生する前に、Livewireリクエストで呼び出します。
hydrateFoo() $fooプロパティをハイドレイトした後に実行します。
dehydrate() render()の後、コンポーネントを"dehydrate"し、フロントエンドへ送信する前に呼び出します。
dehydrateFoo() $fooプロパティを非ハイドレイトする前に実行します。
updating() Livewireコンポーネントのデータが更新される前に実行される(wire:modelを使用しており、PHP内部を直接ではない)
updated($field, $newValue) プロパティを更新した後に呼び出します。
updatingFoo() $fooプロパティが更新される前に実行されます。
updatedFoo($newValue) "foo"プロパティを更新した後に呼び出します。
updatingFooBar() $fooプロパティのネストしたプロパティbarを更新する前に実行されます。
updatedFooBar($newValue) "foo"プロパティのネストした"bar"キーを更新した後に呼び出します。
render() "dehydrate"の前に呼び出し、コンポーネントのBladeビューをレンダーします

コンポーネントクラスのprotectedプロパティ

Livewireは、コンポーネントのクラスでprotectedなプロパティを通じてコア機能を提供しています。これらのほとんどは、プロパティとして宣言するのではなく、メソッドで値を返すのを好む場合にそなえ、同じ名前の対応するメソッドがあります。

class ShowPost extends Component
{
    protected $rules = ['foo' => 'required|min:6'];
}
名前 説明
$queryString クエリ文字列へ「バインド」するプロパティを宣言します。ドキュメントを読む
$rules $this->validate()を呼び出すときにプロパティに適用される検証ルールを指定します。ドキュメントを読む
$listeners 他のコンポーネントが発行するイベントで、リッスンするものを指定します。ドキュメントを読む
$paginationTheme ページネーションテーマにTai​​lwindとBootstrapのどちらを使用するかを指定します。ドキュメントを読む

コンポーネントクラスのトレイト

以下は、Livewireコンポーネントの追加機能を解除するトレイトです。通常、「オプトイン」として最適と思われる機能です。

class ShowPost extends Component
{
    use WithPagination;
}
名前 説明
WithPagination このトレイトにより、Laravelのストックページネーションシステムの代わりにLivewireベースのページネーションが可能になります。ドキュメントを読む
WithFileUploads このトレイトにより、type="file"の入力にwire:modelを追加できます。ドキュメントを読む

クラスメソッド

class PostForm extends Component
{
    public function save()
    {
        ...

        $this->emit('post-saved');
    }
}
名前 説明
$this->emit($eventName, ...$params) ページ上の他コンポーネントにイベントを発行します。
$this->emit($eventName, ...$params)->up() ページ上の親コンポーネントにイベントを発行します。
$this->emit($eventName, ...$params)->self() このコンポーネントにのみイベントを発行します。
$this->emit($eventName, ...$params)->to($componentName) 指定された名前と一致するコンポーネント全部にイベントを発行します。
$this->dispatchBrowserEvent($eventName, ...$params) このコンポーネントのルート要素からブラウザイベントをディスパッチします。
$this->validate() パブリックコンポーネントプロパティに対し、$rulesプロパティに与えているバリデーションルールを検証します。
$this->validate($rules, $messages) パブリックプロパティに対して指定したバリデーションルールを検証します。
$this->validateOnly($propertyName) 指定したプロパティに対して$rulesプロパティのバリデーションを検証し、他のプロパティに対しては実行しません。
$this->validateOnly($propertyName, $rules, $messages) 指定した名前のプロパティ名に対し、指定したバリデーションルールを検証します
$this->redirect($url) Livewireリクエストが終了し、フロントエンドに到達したら、新しいURLにリダイレクトします
$this->redirectRoute($routeName) 指定したルート名へリダイレクトします。
$this->skipRender() (通常、パフォーマンス上の理由から)現在のリクエストに対して->render()メソッドの実行をスキップします。
$this->addError($name, $error) コンポーネントのエラーバッグに特定のエラー名と値を追加します。
$this->resetValidation() 現在保存しているバリデーションエラーをリセット(クリア)します。
$this->fill([...$propertyData]) パブリックプロパティ名へ指定値を一括で設定します。
$this->reset() すべてのパブリックプロパティを初期(マウント前)状態にリセットします。
$this->reset($field) 指定したパブリックプロパティをマウント前の状態にリセットします。
$this->reset([...$fields]) 指定した複数のプロパティをリセットします。
$this->only([...$propertyNames]) 特定のプロパティ名のセットに対してのみ、プロパティデータのkey->valueペアを返します。

PHPテストメソッド

以下はLivewireのテストヘルパーで利用できるメソッドです。 完全なドキュメントを読む

public function test()
{
    Livewire::test(ShowPost::class)
        ->assertDontSee('bar')
        ->set('foo', 'bar')
        ->assertSee('bar');
}
名前
->assertSet($propertyName, $value)
->assertNotSet($propertyName, $value)
->assertPayloadSet($propertyName, $value)
->assertPayloadNotSet($propertyName, $value)
->assertSee($string)
->assertDontSee($string)
->assertSeeHtml($string)
->assertDontSeeHtml($string)
->assertSeeHtmlInOrder([$firstString, $secondString])
->assertSeeInOrder([$firstString, $secondString])
->assertEmitted($eventName)
->assertNotEmitted($eventName)
->assertDispatchedBrowserEvent($eventName)
->assertHasErrors($propertyName)
->assertHasErrors($propertyName, ['required', 'min:6'])
->assertHasNoErrors($propertyName)
->assertHasNoErrors($propertyName, ['required', 'min:6'])
->assertRedirect()
->assertRedirect($url)
->assertViewHas($viewDataKey)
->assertViewHas($viewDataKey, $expectedValue)
->assertViewHas($viewDataKey, function ($dataValue) {})
->assertViewIs('livewire.some-view-name')

また、特定のページでコンポーネントの存在をチェックする、Laravelのレスポンステストヘルパーも使用できます。

名前
$response->assertSeeLivewire('some-component')
$response->assertDontSeeLivewire('some-component')

Artisanコマンド

コンポーネントの作成などの頻繁なタスクを簡単にするためにLivewireで利用できる"Artisan"コマンドです。

名前 説明
artisan make:livewire 新しいコンポーネントを作成します。
artisan livewire:make 新しいコンポーネントを作成します。
artisan livewire:copy コンポーネントをコピーします。
artisan livewire:move コンポーネントを移動します。
artisan livewire:delete コンポーネントを削除します。
artisan livewire:touch livewire:makeのエイリアスです。
artisan livewire:cp livewire:copyのエイリアスです。
artisan livewire:mv livewire:moveのエイリアスです。
artisan livewire:rm livewire:deleteのエイリアスです。
artisan livewire:stubs ローカルで変更するためのLivewireスタブ(上記のコマンドで使用)をリソース公開します。
artisan livewire:publish Livewireの設定ファイルをプロジェクトにリソース公開します。(config/livewire.php
artisan livewire:publish --assets Livewireの構成ファイルとそのフロントエンドアセットをプロジェクトへリソース公開します。
artisan livewire:configure-s3-upload-cleanup クラウドディスクドライバーのS3バケットに対し、一時的なアップロードを24時間後にクリアするように設定します。

PHPライフサイクルのフック

以下は、(コンポーネントレベルではなく)グローバルレベルでライフサイクルの発生をPHPの中でリッスンするためにLivewireが提供するフックです。これらは、Livewireのコア機能の重要な部分を提供するために内部的に使用されており、皆さんがLivewireを拡張するためにServiceProvidersで使用できます。

Livewire::listen('component.hydrate', function ($component, $request) {
    //
});
名前 パラ メータ 説明
component.hydrate ($component, $request) すべてのコンポーネントのhydrationを実行します。
component.hydrate.initial ($component, $request) INITIAL hydrationのみ実行します。(コンポーネントが最初にロードされたとき)
component.hydrate.subsequent ($component, $request) 最初のコンポーネントリクエストの後にのみhydrationを実行します
component.dehydrate ($component, $response) すべてのコンポーネントのdehydrationを実行します。
component.dehydrate.initial ($component, $response) INITIAL dehydrationのみ実行します(コンポーネントが最初にロードされたとき)
component.dehydrate.subsequent ($component, $response) 最初のコンポーネントリクエストの後にのみdehydrationを実行します
property.hydrate ($name, $value, $component, $request) 指定したプロパティがhydrationされた時に実行します。
property.dehydrate ($name, $value, $component, $response) 指定したプロパティがdehydrationされた時に実行します。

ドキュメント章別ページ

ヘッダー項目移動

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

その他

?

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