I have a login method inside a Vue ponent that uses firebase to sign in a user. I'm using puted properties user, message, and hasErrors. When this method runs, It goes into the catch function, but this error es up: Uncaught TypeError: Cannot set property 'message' of undefined. I've tried changing the vuex state directly (because that's what the puted 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 puted prop looks like:

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

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

I have a login method inside a Vue ponent that uses firebase to sign in a user. I'm using puted properties user, message, and hasErrors. When this method runs, It goes into the catch function, but this error es up: Uncaught TypeError: Cannot set property 'message' of undefined. I've tried changing the vuex state directly (because that's what the puted 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 puted prop looks like:

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

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

• javascript
• vue.js

• 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 Commented Sep 21, 2017 at 11:52

1 Answer 1

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