CBWIRE
InstallSource CodeIssuesSupport
v3.x
v3.x
  • Introduction
  • Getting Started
  • Configuration
  • How It Works
  • Release History
    • What's New With 3.2
    • What's New With 3.1
    • What's New With 3.0
    • What's New With 2.2
    • What's New With 2.1
    • What's New With 2.0
  • Examples
    • Contact Form
    • Multi-select Input
    • File Upload
  • Resources
  • The Essentials
    • Components
    • Templates
    • Data Properties
    • Computed Properties
    • Actions
    • Events
    • Lifecycle Methods
    • JavaScript
    • Testing
  • Wire Features
    • Validation
    • File Uploads
    • Query String
    • Redirecting
    • WireBox
  • Template Features
    • Directives
    • Loading States
    • Polling
    • Prefetching
    • Offline State
    • Defer Loading
    • Dirty State
  • Integrations
    • ContentBox CMS
    • SPAs with Turbo
    • AlpineJS
Powered by GitBook
On this page
  1. Template Features

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>
PreviousDefer LoadingNextContentBox CMS

Last updated 1 year ago