Vue.js - Can't access computed properties from methods

Question

I have a login method inside a Vue component that uses firebase to sign in a user. I'm using computed properties user, message, and hasErrors. When this method runs, It goes into the catch function, but this error comes up: Uncaught TypeError: Cannot set property 'message' of undefined. I've tried changing the vuex state directly (because that's what the computed prop does), but this gives the same error. Here is the method I'm using:

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
    })
  // ...
}

Here's what the computed prop looks like:

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

I'm pretty sure the problem has to do with it being inside a Promise. So how can I access computed properties within the firebase Promise?

this is not what you think it is inside the callback-probably want to read up on how this works, and how to remedy it. — Dave Newton

craig_h craig_h · Accepted Answer · 2017-09-21T11:57:05

this inside a callback refers to the callback itself (or rather, as pointed out, the execution context of the callback), not the Vue instance. If you want to access this you either need to assign it to something outside the callback:

  // 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
    })

Or if you are using ES2015 use an arrow function, which do not define their own this context:

  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 - Can't access computed properties from methods

1 Answers