Livewire 確認ダイアログでイベントを発火するには？

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

Livewire 確認ダイアログでイベントを発火するには？

確認ダイアログ（HTML側）でイベントを発火して、Livewireコンポーネント でイベントを受け取るには
①JavaScript の Livewire.emitメソッド でイベントを発火させる。
②Livewireコンポーネントのリスナーにイベントを登録する。
でキメマス。
https://laravel-livewire.com/docs/2.x/events#from-js ←こちらの話です。

もっさん先輩
もっさん先輩
  1. テンプレートに「変更する」ボタンを配置します。
<button type="button" class="ui positive button" id="modify">
  変更する
</button>
  1. 「変更する」ボタンが押されると、確認ダイアログを表示するようにします。
<div class="ui basic modal" id="confirm">
  <div class="ui icon header">
    <i class="green question circle icon"></i>
    送信の確認
  </div>
  <div class="content">
    <p>入力内容を送信してもよろしいですか？</p>
  </div>
  <div class="actions">
    <div class="ui red cancel inverted button">
      <i class="remove icon"></i>
      いいえ
    </div>
    <div class="ui green ok inverted button">
      <i class="checkmark icon"></i>
      はい
    </div>
  </div>
</div>
<script>
$('#modify').on('click',() => {
  $('#confirm').modal({onApprove:() => Livewire.emit('modify')}).modal('show')
})
</script>

確認ダイアログで「はい」ボタンが押された時に、「Livewire.emit(‘modify’)」で modifyイベント を発火させます。

  1. Livewireコンポーネントのリスナーに modifyイベント を登録して、イベントを受け取ります。
<?php
namespace App\Http\Livewire;
class Form extends \Livewire\Component
{
  protected $listeners = ['modify'];
  public function modify() {
    \Log::debug(__METHOD__);
  }
}

以下の変更ボタンのように「wire:click=”modify”」となっていれば、リスナーに modifyイベント を登録しなくても 呼び出すことができましたが、wire:click を記載しない場合には、リスナーにイベントを登録する必要がありました。

<button type="button" class="ui positive button" wire:click="modify">
  変更する
</button>

以上

Scroll to Top