如果想在资料被「污染」也就是被更改过时，想要透过新增 Class 来做特别的显示，就可以使用 wire:dirty 来达成。这个功能比较常用在对资料的更改，例如：修改个人资料时要让使用者知道刚刚有改到哪些栏位，就很适合来用这个功能。

官方文件

DEMO

基础用法

由於只有在值被改变前会触发 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>