【Laravel實戰】10分鐘搞懂Livewire的Dirty髒狀態處理

有些時候你想要提示使用者，當內容已經修改但卻還沒同步到後端的 Livewire 組件這樣的狀況，稱之為髒狀態(Dirty Status)。就可以用到這個技巧

當在輸入項使用 wire:model 或 wire:model.lazy，你可能會想要讓使用者知道該欄位處於髒狀態(Dirty Status)，直到 Livewire 完成回應

髒狀態時開啟或關閉樣式類別 (Toggling classes on "dirty" elements)

帶有 wire:dirty 語句的元素將會檢查前台與後台值的差異，以及最終返回的 Livewire 資料

加入 class 修飾子讓你能夠在元素處於髒狀態(Dirty Status)時加入樣式類別

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

現在當使用者修改輸入項的值，該元素將會得到 border-red-500 樣式，該樣式會在該輸入項結束髒狀態時被移除，也就是 Livewire 組件更新完成之後

同樣的，你也能夠進行相反的操作，也就是移除類別，透過加入 .remove 修飾子，就像是在 wire:loading 所做的

<div>
    <input wire:dirty.class.remove="bg-green-200" class="bg-green-200" wire:model.lazy="foo">
</div>

bg-green-200 樣式類別將會在輸入項處於髒狀態時被移除

開關其他元素 (Toggling elements)

wire:dirty 語句在不使用修飾子的狀態下是會隱藏該元素直到觸發髒狀態(Dirty Status)，這可用於避免處於髒狀態時被使用者異動。但就如同載入狀態， dirty 語句同樣能用於開啟或關閉其他元素的樣貌，透過使用 wire:target

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

在這個例子裡頭， span 預設會被隱藏，只有在 input 元素 foo 處於髒狀態時才會顯示出來

開關其他元素的樣式類別 (Toggling classes on other elements)

class和 attribute 修飾子能夠用於以相同的方式來參考元素

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

現在，當輸入項 foo 處於髒狀態，label 文字將會收到 text-red-500 樣式