Vue how to detect form input changes

user_3955607 0
Viewed 9189

In my vue-app I have a form, which should detect each change. I tried to use @change and also with a watcher, but with no luck...

form: {
  name: "",
  surname: "",
  email: "",
},
changed: false

then in my template:

<form @change="hasChanged">

Then my watcher and method:

watch: {
    form: {
        handler: function(v) {
            return this.hasChanged();
        },
        deep: true
    }
},
methods: {
  hasChanged(){
    this.changed = true
  }
}

But this doesn't work.... what am I doing wrong?

vuejs2 vue.js javascript
3 Answers

Form element does not have a change listener. Consider binding each input instead with the onChanged event instead.

From what I am seeing it seems like you want to know if the form has been edited. In that case you can try this


<template>
    <form>
        <input v-model="form.first_name"/>
        <input v-model="form.last_name"/>
        <input v-model="form.email"/>
    </form> 
</template>

<script>
    const defaultForm = {
        first_name: '',
        last_name: '',
        email: '',
    }  
    export default {
      data () {
        return {
            form: defaultForm
        }
      },
      computed: {
        hasChanged () {
          return Object.keys(this.form).some(field => this.form[field] !== defaultForm[field])
        }
      }
    }
</script>
user_127231270

You can use the watch from vuejs, a very simple trick.

watch: {
   'form': {
        handler: function(v) {
         return this.enableFormSubmission();
        },
        deep: true
    }
},
user_19215520

Based on @Babacar answer the hasChanged always return false as the form and defaultForm refer to the same object. The form should be a copy before rendering. We can use a shallow copy for the normal case and the nested object, we need to use the deep copy.

<template>
    <form>
        <input v-model="form.first_name"/>
        <input v-model="form.last_name"/>
        <input v-model="form.email"/>
    </form> 
</template>

<script>
    const defaultForm = {
        first_name: '',
        last_name: '',
        email: '',
    }  
    export default {
      data () {
        return {
            form: {...defaultForm } // copy here
        }
      },
      computed: {
        hasChanged () {
          return Object.keys(this.form).some(field => this.form[field] !== defaultForm[field])
        }
      }
    }
</script>
user_74990690
Related