如何将计算用于 v-model？

Question

我使用计算从 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>

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

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

"this.email" 指的是我的计算，它是从 API.

获取数据

我怎样才能正确地编写这个取消过程并在输入标签中看到我以前的数据？

Answer 1

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

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

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

如何将计算用于 v-model？

How can use computed for v-model?

javascript

vue.js

vuex

vuejs2