[Livewire] 為了報告狀態而短暫出現的訊息- Flash Messages

有些時候我們可能會需要讓系統可以提示一些訊息，以往我們可能會透過 ajax 或 fetch 的方式來溝通，而在 livewire 則是提供了很方便的 flash messages 的方法，這邊來看一下該怎麼使用。

首先建立一個新的 component：

php artisan make:livewire message

接著在 Message.php 那隻建立一個新的 function，只要執行了就會把資料寫進 flash message 裡

public function call(){
  session()->flash('message', 'Yes!!');
}

這邊應該能看得出來 livewire 是把資訊存在 session 裡面，但是是用 flash message 的方式來存，也就是這個訊息很快就會從 server 刪掉了。

接著 HTML 這邊寫這樣，用一個按鈕去觸發 function，然後有一個地方判斷只要有 flash message 就顯示那個訊息。

<button class="btn btn-info" wire:click="call()">call</button>
  <div class="py-2">
  @if (session()->has('message'))
    <div class="alert alert-success">
      {{ session('message') }}
    </div>
  @endif
</div>

這樣在點擊之後就會出現存到 flash message 的訊息了。

如果要讓訊息是一段時間後消失，可以參考這篇

flash message 更多是可以用在表單驗證，參考官網的範例如下：

class UpdatePost extends Component
{
    public Post $post;
    protected $rules = [
       'post.title' => 'required',
    ];
    public function update()
    {
      $this->validate();
      $this->post->save();
      session()->flash('message', 'Post successfully updated.');
    }
}

前端的部分：

<form wire:submit.prevent="update">
    <div>
        @if (session()->has('message'))
            <div class="alert alert-success">
                {{ session('message') }}
            </div>
        @endif
    </div>
    Title: <input wire:model="post.title" type="text">
    <button>Save</button>
</form>

官網的介紹