Vue.js - невозможно получить доступ к вычисленным свойствам из методов

Question

У меня есть метод входа в компонент Vue, который использует FireBase для входа в систему пользователя. Я использую вычисленные свойства user, message, а также hasErrors, Когда этот метод работает, он переходит в catch функция, но эта ошибка появляется: Uncaught TypeError: Cannot set property 'message' of undefined, Я попытался изменить состояние vuex напрямую (потому что это то, что делает вычисляемый реквизит), но это дает ту же ошибку. Вот метод, который я использую:

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, используйте функцию стрелки, которая не определяет свои собственные this контекст:

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