[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>

官網的介紹

 

 

課程推薦

ChatGPT X Clipchamp AI 生成影片、配音與字幕應用實戰班

ChatGPT X Clipchamp AI 生成影片、配音與字幕應用實戰班

輸入折扣碼 TC1451JAN 還可以額外獲得 NT$500 優惠喔。

和我們交流

加入我們的社群,裡面會有一些技術的內容、有趣的技術梗,以及職缺的分享,歡迎和我們一起討論。