[Livewire] 經過一段時間後隱藏透過 session flash 產生的 UI

當我們在 livewire 的 component 傳送一個 session flash：

session()->flash('message', '儲存成功');

前端偵測到就會出現內容

@if (session()->has('message'))
  <div class="alert alert-success">
    {{ session('message') }}
  </div>
@endif

那如果要讓這個內容隔一段時間就消失，可以在 componet 傳送變數過去

$this->emit('alert_remove');

前端這邊就可以抓到傳送來的事件後執行 js

document.addEventListener('livewire:load', function () {
            Livewire.on('alert_remove',()=>{
                setTimeout(function(){
                    $(".alert").fadeOut();
                }, 5000); // 5 secs
            });
        })

主要就是要知道怎麼抓到事件就好了。