アクション 2.x Livewire

深く掘り下げたスクリーンキャストがある、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:[ディスパッチされたブラウザイベント]="[アクション]"です。

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

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で公開されている有効なキー名をケバブケースへ変換すれば、修飾子として直接使用できます。

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

<input wire:keydown.page-down="foo">

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

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