仅在输入值更改时提交表单

Question

I have a form with some input fields and I am using some firebase methods to update those fields. But everytime when clicking the submit button the entire form is submitting. How can I check if any if the fields value changed. For an example if display name remains same then the updateProfile method will not run on submit. Please find the code below. onUpdateProfile is the form submit method.

{
  methods: {
    onUpdateProfile() {
      firebase.auth().onAuthStateChanged(user => {
        if (user) {
          //Getting Current User

          //Updating User name on submit
          let user = firebase.auth().currentUser;
          user
            .updateProfile({
              displayName: this.profile.name
            })
            .then(() => {
              this.formSuccess = "Name changed successfully.";
              setTimeout(() => {
                $(".form-success").fadeOut("slow");
              }, 2500);
            })
            .catch(error => {});

          //Updating User other details on submit
          const db = firebase.firestore().collection("profiles");
          db.get()
            .then(doc => {
              if (doc.exists) {
                //If user data exists it will update
                db.doc(user.uid)
                  .update({
                    phonenumber: this.profile.phonenumber,
                    fulladdress: this.profile.fullAddress,
                    zipcode: this.profile.zipcode
                  })
                  .then(() => {
                    this.formSuccess = "Profile Updated successfully.";
                    setTimeout(() => {
                      $(".form-success").fadeOut("slow");
                    }, 2500);
                  })
                  .catch(error => {});
              } else {
                //If user data not exists it will create new collection and add the new user records
                db.doc(user.uid)
                  .set({
                    phonenumber: this.profile.phonenumber,
                    fulladdress: this.profile.fullAddress,
                    zipcode: this.profile.zipcode
                  })
                  .then(() => {
                    this.formSuccess = "Profile Updated successfully.";
                    setTimeout(() => {
                      $(".form-success").fadeOut("slow");
                    }, 2500);
                  })
                  .catch(error => {});
              }
            })
            .catch(error => {});
        } else {}
      });
    },
  },
  data() {
    return {
      profile: {
        name: "",
        email: "",
        phonenumber: "",
        fullAddress: "",
        zipcode: "",
      },
      formSuccess: null
    };
  },
}

Answer 1

To only update the user document if there are any changes, you'll need to compare the values inside the document with the values from the form. Something like this:

//Updating User other details on submit
const db = firebase.firestore().collection("profiles");
db.doc(user.uid).get()
  .then(doc => {
    if (doc.exists) {
      var updates = {};
      if (doc.data().phonenumber != this.profile.phonenumber) updates["phonenumer"] = this.profile.phonenumber;
      if (doc.data().fulladdress != this.profile.fullAddress) updates["fulladdress"] = this.profile.fullAddress;
      if (doc.data().zipcode != this.profile.zipcode) updates["zipcode"] = this.profile.zipcode;

      if (Object.keys(updates).length > 0) {
        db.doc(user.uid).update(updates)
      }

The changes I made here:

1. Your code loaded all user profiles, while the above only load the profile of the current user.
2. Build an updates object with only the values that have changed.
3. Only update the database if there are any changes.