Livewire 2.x アクション

深く掘り下げたスクリーンキャストがある、Livewireに驚いてください観る(英語版)

イントロダクション

Livewireのアクションの目標は、ページの相互作用を簡単にリッスンできるようにし、Livewireコンポーネント上のメソッドを呼び出し(コンポーネントを再レンダーリング)できるようにすることです。

基本的な使い方をご覧ください。

class ShowPost extends Component
{
    public Post $post;

    public function like()
    {
        $this->post->addLikeBy(auth()->user());
    }
}
<div>
    <button wire:click="like">Like Post</button>
</div>

Livewireは、ブラウザイベントのリッスンを簡単にするためのいくつかのディレクティブを提供しています。これらすべてに共通する形式は、wire:[ディスパッチされたブラウザイベント]="[アクション]"です。

リッスンする必要がある一般的なイベントは次のとおりです。

イベント ディレクティブ
click wire:click
keydown wire:keydown
submit wire:submit

HTMLにおける、それぞれの例をいくつか紹介します。

<button wire:click="doSomething">Do Something</button>
<input wire:keydown.enter="doSomething">
<form wire:submit.prevent="save">
    ...

    <button>Save</button>
</form>

Tip!! 結合する要素により、どんなイベントのディスパッチもリッスンできます。"foo"という名前のブラウザイベントをディスパッチする要素があるとしましょう。次のようにこのイベントをリッスンできます。<buttonwire:foo ="何かのアクション">

アクションのパラメータを渡す

以下のように、式で直接Livewireアクションに追加のパラメーターを渡せます。

<button wire:click="addTodo({{ $todo->id }}, '{{ $todo->name }}')">
    Todo追加
</button>

アクションに渡す追加パラメーターは、標準のPHPパラメーターとしてコンポーネントのメソッドに渡されます。

public function addTodo($id, $name)
{
    ...
}

アクションパラメータは、タイプヒントを使用したキーにより、モデルを直接解決することもできます。

public function addTodo(Todo $todo, $name)
{
    ...
}

Laravelの依存性注入コンテナを介して解決する必要のあるサービスがアクションで必要な場合は、アクションの引数の追加パラメーターの前にそれらをリストしてください。

public function addTodo(TodoService $todoService, $id, $name)
{
    ...
}

イベント修飾子

キーダウンの例で確認したように、Livewireディレクティブは、イベントに機能を追加するための「修飾子」を提供する場合があります。以下は、すべてのイベントで使用可能な修飾子です。

修飾子 説明
stop event.stopPropagation()と等価
prevent event.preventDefault()と等価
self イベントがそれ自体でトリガーされた場合にのみ、アクションを起動します。これにより、子要素が発行したイベントをキャッチするのを防ぎます。(モーダル背景にリスナを登録する場合によく起きます。
debounce.150ms アクションの処理にXmsのデバウンスを追加します

キーダウン修飾子

特定のキーのキーダウンイベントをリッスンするには、キーの名前を修飾子として渡してください。KeyboardEvent.keyで公開されている有効なキー名をケバブケースへ変換すれば、修飾子として直接使用できます。

一般的に必要となりそうなキーの簡単なリストです。

ネイティブなキーイベント Livewireの修飾子
Backspace backspace
Escape escape
Shift shift
Tab tab
ArrowRight arrow-right
<input wire:keydown.page-down="foo">

上記の例では、event.keyPageDownと等しい場合にのみハンドラを呼び出します。

マジックアクション

Livewireには、"$"記号のプレフィックスが付いた「マジック」アクションがいくつか存在します。

関数 説明
\$refresh 全アクションを実行せずにコンポーネントを再レンダーリングします
\$set(\'property\', value) プロパティの値を更新するためのショートカット
\$toggle(\'property\') 論理値プロパティのオンとオフを切り替えるショートカット
\$emit(\'event\', ...params) 指定されたパラメータを使用して、グローバルイベントバスでイベントを発行します
\$event アクションをトリガーする原因となった発行イベントの値を保持する特別な変数。使用例:wire:change="setSomeProperty($event.target.value)"

これらをイベントリスナの値として渡して、Livewireで特別なことを行えます。

例として、$set()を取り上げましょう。コンポーネントのプロパティ値を任意に設定するために使用できます。Counterコンポーネントのビューを考えてみましょう。

適用前

<div>
    {{ $message }}
    <button wire:click="setMessageToHello">Say Hi</button>
</div>

適用後

<div>
    {{ $message }}
    <button wire:click="$set('message', 'Hello')">Say Hi</button>
</div>

setMessageToHello関数を呼び出さなくなったことに注意してください。データセットの対象を直接指定しています。

ドキュメント章別ページ

ヘッダー項目移動

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

その他

?

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