如何将计算用于 v-model？答案

【问题标题】：如何将计算用于 v-model？
【发布时间】：2022-01-23 11:51:11
【问题描述】：

我使用计算从 API 获取数据。 “UserModule.userInfo.usrEmail”是我的 vuex 中的状态。如下：

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>

用户可以编辑电子邮件，也可以取消他们的编辑过程并返回到他们以前的数据，但是在编辑中一切都是正确的，但是当我想取消这个过程时，我以前的数据没有显示在输入中，我看到了我的新数据不正确我想取消它。这是我的输入取消方法：

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

“this.email”指的是我的计算，它是从 API 获取数据。

如何正确编写此取消过程并在输入标签中查看我以前的数据？

【问题讨论】：

标签： javascript vue.js vuejs2 vuex

【解决方案1】：

所以你可以使用这个解决方案：

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
  }
},

【讨论】：

【解决方案2】：

这是因为你的UserModule.userInfo.usrEmail。

此状态不会更新。当您的 UserModule.userInfo.usrEmail 更改时，您的 get 将在计算中起作用。

【讨论】：

但我不想更改我的“UserModule.userInfo.usrEmail”。这是我在其中存储用户电子邮件的状态。