Check if clone is dirty

[ericuldall]

One of the more common use cases I have with models is using them in forms. When using a form it's nice to have that baked in with some save button state handling and navigation guards to protect changes.

Is there a flag to see if a model is dirty? I don't see one in the prototype as of now but maybe i'm missing something. The way I see it it could work like this.

<script setup>
// ... assume loaded my model correctly up here
  const model = MyModel({a, b, c});
  const form = model.clone();

  const submit = async () => {
    await form.save();
    form.commit();
  }
</script>
<template @submit.prevent="submit">
  <form>
    <label>A</label><input v-model="form.a" />
    <label>B</label><input v-model="form.b" />
    <label>C</label><input v-model="form.c" />
    <button type="submit" :disabled="!form.__isDirty" />
  </form>
</template>

That's a basic use case. I guess in lieu of something existing on the model we could do model === form ?
Interested to know if there's already a convention for this.

[ericuldall]

This seems to work okay for now:

const isDirty = computed(() => {
    return JSON.stringify(modelClone) != JSON.stringify(model);
});

Not sure if this is recommended or not.

[marshallswain]

That's probably the best way to handle it, really.

[marshallswain]

If you haven't checked out Formkit, I'd recommend giving it a shot. It kinda handles the overhead for you. You don't have to
manually bind v-model to elements. It handles reset states, too. Pretty impressive. https://formkit.com/