【Laravel Livewire】画面のアクションに応じてメソッドを実行する
こんにちは。今回はLaravel Livewireで画面で発生したアクションに応じてメソッドを実行する方法を解説します。
画面のアクションとは
ユーザーが画面に対して起こすアクションのことです。例えば画面の特定の場所をクリックしたり、テキストボックスなどのデータ入力用コントロールにフォーカスを当てたりすることです。
メソッドを実行するとは
CLASS側に作成したメソッドを実行することです。
CLASSという表現を少し解説しておきます。Livewireはコンポーネントという単位で画面を作っていきます。このコンポーネントは２つのファイルで構成されており、それぞれVIEWとCLASSという役割を持ちます。VIEWは画面の見た目をHTMLで記述したものです。LaravelのBladeテンプレートの記法をそのまま使うことができます。一方CLASSはバックエンドの処理全般を担います。DBアクセスやビジネスロジックは全てCLASS側に記述します。
この記事ではLivewireの基本となるコンポーネントの作成については解説しません。コンポーネントの作成については以下の記事を参照してください。【Laravel Livewire】チュートリアル UIコンポーネントの作成 1/2
画面アクションの簡単な例
それでは簡単な例を用いて解説していきます。ボタンをクリックした時にメソッドを実行してみましょう。
VIEW側
<botton wire:click="dosomething">画面アクションテスト</button>CLASS側
public function dosomething(){
// 何か処理を書く
}VIEW側でボタンをクリックしたときのイベントを感知するにはwire:clickと記述します。dosomethingメソッドを呼び出しますので、CLASS側に対応するメソッドをpublicで定義しておきます。記述の文法はwire:[ブラウザのイベント名]="[呼び出すメソッド名]"となります。
よく使う画面アクション
よく使う画面アクションを以下の表にまとめておきました。
| アクション | 発生タイミング |
| wire:keydown | 特定のキーを押下したとき |
| wire:input | 値を入力したとき |
| wire:focusout | 項目からフォーカスが外れたとき |
| wire:submit | フォームをsubmitしたとき |
wire:のあとに続くイベント名は上記で紹介したものに限らず、ブラウザで発生するイベントを全て指定可能です。どのようなイベントを記述できるかはいかのリファレンスが参考になります。https://developer.mozilla.org/ja/docs/Web/Events
メソッドにパラメータを渡す方法
VIEWからCLASSのメソッドの引数に対してパラメータを渡すことができます。
VIEW側
<input type="text" wire:blur="dosomething('hello')">CLASS側
public function dosomething($hello){
}まとめ
今回は画面のアクションに応じてメソッドを実行する方法を解説しました。Livewireを使う上での基礎になりますので書き方はマスターしておきたいところです。