Livewire 2.x アクション

{video} 細かに説明したスクリーンキャストを用意している、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.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関数を呼び出さなくなったことに注意してください。データセットの対象を直接指定しています。

Copyright reserved by Livewire / Caleb Porzio(Original English documentations) and Hirohisa Kawase(Japanese translations).
Please check an original site to read English documentations.