[Vuejs]-Enabling and Disabling Submit button if editable form content changes with Vue3

by

1👍

✅

You can create a reactive object with the form data using the reactive function, and then use a computed property to determine if the form has changed.

For example:

<template>
  <form>
    <label for="first_name">First Name</label>
    <input id="first_name" type="text" v-model="form.first_name">

    <button type="submit" :disabled="formUnchanged">Save</button>
  </form>
</template>

<script>
import { reactive, computed } from 'vue';

export default {
  setup() {
    const form = reactive({
      first_name: 'John',
    });
    const initialForm = JSON.stringify(form);

    const formUnchanged = computed(() => {
      return JSON.stringify(form) === initialForm;
    });

    return { form, formUnchanged };
  },
};
</script>

You can use reactive to create a reactive form object with the form data, and computed to create a formUnchanged property that checks if the form object has changed from its initial state.

👤Raghav Kukreti

Leave a comment