Vue：检查表单输入是否由用户更改

Question

I am new to Vue and want to achieve below result.

I have a form of data and a save button, before the page loads, it will fetch database and fill the form data. Because all the form data are filled, the save button is disabled and the user can not click unless the user change some data, then it knows the form data has changed, the save button will no longer be disabled and can be saved.

I know that should use watch property, but actually how I can implement this?

Thank you guys!

The form data is like this

data(){
  return {
     form: {
         firstName: "",
         lastName: ""
     }
  }
}

Answer 1

You can do something as below by having the two different objects actual and modified .

Here I have used underscore js for deep clone or isEqual, so don't forget to import.

computed: {
// Use is property for the save button to enable or disable
isDataChanged: function() {
    return _.isEqual(this.actualForm, this.modifiedForm);
 }
},
data() {
return {
    actualForm: {
        firstName: "",
       lastName: ""
    },
   modifiedForm: {
       firstName: "",
       lastName: ""
   }
 }
}, 
methods: {
fetchData: function() {
    // get data and assign it to actual form
    this.actualForm = responseData;
    this.modifiedForm = _.cloneDeep(this.actualForm) // this will create the new instance
 }
}

Answer 2

You can use a watch on form like this below. You can also use deep:true if you need to watch nested property within form.

 watch: { form: { deep: true, handler(val) { // Enable save button here. You can also evaluate any other condition to enable } } }