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
?
-
this
is not what you think it is inside the callback-probably want to read up on howthis
works, and how to remedy it. – Dave Newton Commented Sep 21, 2017 at 11:52
1 Answer
Reset to default 8this
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
})