僅在輸入值更改時提交表單

Question

我有一個包含一些輸入字段的表單，我正在使用一些 firebase 方法來更新這些字段。 但是每次單擊提交按鈕時，整個表單都在提交。 如果字段值發生變化，我如何檢查是否有任何變化。 例如，如果顯示名稱保持不變，則 updateProfile 方法將不會在提交時運行。 請在下面找到代碼。 onUpdateProfile 是表單提交方法。

{
  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

要僅在有任何更改時更新用戶文檔，您需要將文檔中的值與表單中的值進行比較。 像這樣的東西：

//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)
      }

我在這里所做的更改：

1. 您的代碼加載了所有用戶配置文件，而上述代碼僅加載當前用戶的配置文件。
2. 僅使用已更改的值構建updates對象。
3. 僅在有任何更改時才更新數據庫。