如何將計算用於 v-model？

Question

我使用計算從 API 獲取數據。 “UserModule.userInfo.usrEmail”是我的 vuex 中的 state。 如下所示：

data() {
    return {
      vModel: {
        email: {
          value: "",
        },
      }
   }
}

computed: {
   email:{
      get: function(){
        return UserModule.userInfo ? UserModule.userInfo.usrEmail : "";
      },
      set : function(email){
        this.vModel.email.value = email
      }
    },
 }

然后將其顯示給用戶，如下所示：

<input v-model="email"></input>

用戶可以編輯 email 並取消他們的編輯過程並返回到他們以前的數據但是在編輯中一切都是正確的但是當我想取消這個過程時我以前的數據沒有顯示在輸入中並且我看到我的新數據不正確我想取消它。 這是我的輸入取消方法：

resetInput(input) {
      this.vModel.email.value = this.email
    },

“this.email”指的是我的計算，它是從 API 獲取數據。

如何正確編寫此取消過程並在輸入標簽中查看我以前的數據？

Answer 1

這是因為您的UserModule.userInfo.usrEmail 。

此 state 不會更新。 當您的get更改時，您的計算將UserModule.userInfo.usrEmail 。

Answer 2

所以你可以使用這個解決方案：

data() {
  return {
    useGet :{
      email: true,
    },
  }
}

在你的方法中：

resetInput(input) {
  this.useGet.email = true
},

並在您的計算中：

email: {
  get: function () {
    if (this.useGet.email) {
      return UserModule.userInfo ? UserModule.userInfo.usrEmail : ""
    }
    return ""
  },
  set: function (email) {
    this.useGet.email = false
  }
},