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

craig_h · Accepted Answer · 2017-09-21 12:46:52Z

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

It doesn't refer to the callback, it refers to the execution context of the callback, whatever that might be.
Yes, I knew I would get that response from somebody as soon as I typed it. ;)

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related