Dirty States

在某些情况下，提供内容已更改且尚未与后端Livewire组件同步的反馈可能会很有用。

对于使用 wire:model 或 wire:model.lazy 的输入，您可能希望显示字段为 “dirty”，直到Livewire已完全更新。

在“dirty”元素上切换类

带有 wire:dirty 指令的元素将监视前端值和最后返回的 Livewire 数据值之间的差异。

添加 class 修饰符可让您在元素变脏时将其添加到元素中。

<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 类将在 dirty 时从 input 上删除。

切换元素

没有修饰符的 wire:dirty 指令的默认行为是，元素将一直隐藏直到变脏为止。 如果将其用于输入本身，则可能会产生悖论，但与加载状态一样，dirty 指令可用于使用wire:target 来切换其他元素的外观

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

在此示例中，默认情况下将隐藏 span，并且仅在输入元素变脏时才可见。

在其他元素上切换类

类和属性修饰符可以以相同方式用于引用的元素

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

现在，当输入脏时，标签文本将接收 text-red-500 类。