Directive Showcase: v-dirty

Highlight changed fields and gate actions until data is modified.

How it works

v-dirty tracks client changes against the last server snapshot. You can style fields, show warnings and disable actions until data changes.

Directives docs Dirty tracking docs

v-dirty Directive Test

Edit the fields below to see the dirty indicators react.

Name Modified

Email Modified

Bio

You have unsaved changes.

isDirty(): {{ livue.isDirty() }}

dirtyFields: {{ [...livue.dirtyFields] }}

isDirty('name'): {{ livue.isDirty('name') }}

isDirty('email'): {{ livue.isDirty('email') }}

isDirty('bio'): {{ livue.isDirty('bio') }}

app/LiVue/DirtyDirectiveTest.php

class DirtyDirectiveTest extends Component
{
    public string $name = 'Mario';
    public string $email = 'mario@example.com';
    public string $bio = '';

    public function save(): void
    {
        // After round-trip, fields become clean again.
    }
}

resources/views/livue/dirty-directive-test.blade.php

<input
    v-model="name"
    v-dirty:name.class="'border-yellow-500 ring-1 ring-yellow-500/30'"
/>

<span v-dirty:name>Modified</span>

<button
    v-click="save"
    v-dirty.attr="'disabled'"
>
    Save
</button>