There are cases where it may be useful to provide feedback that content has changed and is not yet in-sync with the back-end Livewire component.
For input that uses
wire:model.lazy, you may want to display that a field is 'dirty' until Livewire has fully updated.
Toggling classes on "dirty" elements
Elements with the
wire:dirty directive will watch for differences between the front-end value, and the last returned Livewire data value.
class modifier allows you to add a class to the element when dirty.
1<div>2 <input wire:dirty.class="border-red-500" wire:model.lazy="foo">3</div>
Now, when a user modifies the input value, the element will receive the
border-red-500 class. The class will be removed again if the input value returns to its original state, or if the Livewire component updates.
You can also perform the inverse, and remove classes by adding the
.remove modifier, similar to how
1<div>2 <input wire:dirty.class.remove="bg-green-200" class="bg-green-200" wire:model.lazy="foo">3</div>
bg-green-200 class will be removed from the input while dirty.
The default behaviour of the
wire:dirty directive without modifiers is that the element will be hidden until dirty. This can create a paradox if used on the input itself, but like loading states, the
dirty directive can be used to toggle the appearance of other elements using
1<div>2 <span wire:dirty wire:target="foo">Updating...</span>3 <input wire:model.lazy="foo">4</div>
In this example, the
span will be hidden by default, and only visible when the input element is dirty.
Toggling classes on other elements
The class and attribute modifiers can be used in the same way for referenced elements
1<div>2 <label wire:dirty.class="text-red-500" wire:target="foo">Full Name</label>3 <input wire:model.lazy="foo">4</div>
Now, when the
input is dirty, the label text will receive the