iT邦幫忙

2021 iThome 鐵人賽

DAY 15
0
Modern Web

Laravel Livewire:不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ?!系列 第 15

Day 15 | 元件狀態:污染(被更改) Dirty

如果想在資料被「污染」也就是被更改過時,想要透過新增 Class 來做特別的顯示,就可以使用 wire:dirty 來達成。這個功能比較常用在對資料的更改,例如:修改個人資料時要讓使用者知道剛剛有改到哪些欄位,就很適合來用這個功能。

官方文件
DEMO

https://ithelp.ithome.com.tw/upload/images/20210918/20111805R50IgkJUOf.png

基礎用法

由於只有在值被改變前會觸發 dirty。如果用 wire:model.lazy 的話在滑鼠移開輸入框時就會把值傳回後端,因此就只會在移開前觸發到 dirty,如要在保存前都維持 dirty 狀態,則可以改用wire:model.defer 這樣在送出按鈕按下前都會維持 dirty 狀態。

下面的範例是在修改 $foo 時讓 <input> 加上讓外框變紅的 .border-red-500

<div>
    <input wire:dirty.class="border-red-500" wire:model.lazy="foo">
</div>

指定目標

跟前面幾篇提到的一樣,可以用 wire:target 來指定要監聽哪個變數而觸發,如此一來 dirty 就可以不用侷限在 <input> 上面了!

<div>
    <span wire:dirty wire:target="foo">Updating...</span>
    <input wire:model.lazy="foo">
</div>

當然也可以加 Class 到其他元素上

<div>
    <label wire:dirty.class="text-red-500" wire:target="foo">Full Name</label>
    <input wire:model.lazy="foo">
</div>

也可以透過 wire:target="foo, bar",用逗號隔開不同的變數來指定多個 Target

<div>
    <label wire:dirty.class="text-red-500" wire:target="foo, bar">Full Name</label>
    <input wire:model.lazy="foo">
</div>

如果變數是 Array 的話還可以這樣用

<div>
    <input type="text" wire:model="post.title">
    <input type="text" wire:model="post.author">
    <input type="text" wire:model="post.content">
 
    <div wire:dirty.class="text-red-500" wire:target="post">
        Updating Post...
    </div>
</div>

上一篇
Day14 | 元件狀態:離線 Offline
下一篇
Day 16 | 元件狀態:預載 及 延遲載入 Prefetch & Defer Loading
系列文
Laravel Livewire:不用 Vue 跟 jQuery 居然也能讓 Laravel 的畫面動起來 ?!34

尚未有邦友留言

立即登入留言