Question

我在Vue组件中有一个使用firebase登录用户的登录方法。我正在使用计算属性user，message和hasErrors。当此方法运行时，它进入catch函数，但出现此错误： Uncaught TypeError: Cannot set property 'message' of undefined。我已经尝试直接更改vuex状态（因为这是计算的prop所做的），但这会产生相同的错误。这是我正在使用的方法：

login: function (event) {
  // ... more stuff
  // Sign-in the user with the email and password
  firebase.auth().signInWithEmailAndPassword(this.email, this.password)
    .then(function (data) {
      this.user = firebase.auth().currentUser
    }).catch(function (error) {
      this.message = error.message
      this.hasErrors = true
    })
  // ...
}

这是计算出的道具的样子：

message: {
  get () {
    return this.auth.message // mapState(['auth'])
  },
  set (value) {
    this.$store.commit('authMessage', value)
  }
}

我很确定问题与Promise内的问题有关。那么如何在firebase Promise中访问计算属性？

Answer 1

回调中的

this指的是回调本身（或者更确切地说，如指出的，回调的执行上下文），而不是Vue实例。如果您想访问this，您需要将其分配给回调之外的内容：

  // Assign this to self
  var self = this;

  firebase.auth().signInWithEmailAndPassword(this.email, this.password)
    .then(function (data) {
      self.user = firebase.auth().currentUser
    }).catch(function (error) {
      self.message = error.message
      self.hasErrors = true
    })

如果您使用的是ES2015，请使用arrow function，但不定义自己的this上下文：

  firebase.auth().signInWithEmailAndPassword(this.email, this.password)
    .then(data => {
      this.user = firebase.auth().currentUser
    }).catch(error => {
      this.message = error.message
      this.hasErrors = true
    })

Vue.js - 无法从方法

1 个答案: