Livewireコンポーネントでイベントを発火するには？

/ Livewire / By
ショコラ
ショコラ

Livewireコンポーネントでイベントを発火するには？

Livewireコンポーネント でイベントを発火して、HTML側で受け取るには
①Livewireコンポーネントのメソッドで「$this->emit()」でイベントを発火する。
②HTML側 の Livewire.onメソッド でメッセージを受け取る。

https://laravel-livewire.com/docs/2.x/events#in-js ←こちらの話です。

もっさん先輩
もっさん先輩

「Livewire では、次のように JavaScript でイベント リスナーを登録できます。」

Livewire.on(｛イベント名｝,(パラメーター...) => {})

「この機能は実際には信じられないほど強力です。たとえば、Livewire が特定のアクションを実行したときにアプリ内でトースター (ポップアップ) を表示するリスナーを登録できます。これは、Livewire を使用して PHP と JavaScript の間のギャップを埋める多くの方法の 1 つです。」
ということで、これは凄い機能だと思います。

例

更新ボタンが押されて、onModifyメソッド で何か処理を行い、ブレード側 にイベントを発火する例。

  1. Livewireコンポーネント のメソッドで「$this->emit()」でイベントを発火します。
<?php

namespace App\Http\Livewire;

use Livewire\Component;

class Form extends Component
{
  protected $listeners = ['modify'=>'onModify'];

  public function onModify()
  {
    \Log::debug(__METHOD__);
    $this->emit('modified','入力内容を送信いたしました。');
  }
}
  1. ブレード側の Livewire.onメソッド で modifiedイベント を受け取り、受信したメッセージをダイアログに表示します。
<div class="ui basic modal" id="modified">
  <div class="ui icon header">
    <i class="green check icon"></i>
    送信しました
  </div>
  <div class="content"></div>
  <div class="actions">
    <div class="ui green ok button">ＯＫ</div>
  </div>
</div>
<script>
Livewire.on('modified',message =>
  $("#modified").modal({content:message}).modal('show'))
</script>

以上

Scroll to Top