Comment on page
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>
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>
Last modified 2mo ago