Dirty State

Display HTML elements as data properties change but haven't been updated server-side yet.

In some cases, providing feedback that content has changed and needs to be synchronized with the back end may be helpful.

For input that uses wire:model, or wire:model.lazy, you can use wire:dirty along with wire:target to display HTML elements if a property has been changed client-side but not yet synced with the server.

<div>
    <input wire:model.lazy="foo">
    <div wire:dirty wire:target="foo">Foo not synced yet</div>
</div>

Class Modifier

Adding the .class modifier allows you to add a class to the element when dirty.

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

You can perform the inverse and remove classes by adding the .remove modifier.

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