Cannot access data variable from a function within a method - firebase

Question

I am trying to access a data variable called localUser from a function inside of a method function. But as far as I can tell from the error message, I think it just can't access localUser from data.
This is the error message I get:
Uncaught (in promise) TypeError: Cannot set property 'localUser' of undefined at eval (Form.vue?c13f:100) at auth.js:1361
I have marked where the problem is in the code with the comment of:
// THE BUG - cannot access this.localUser
What I've tried:
Using this.$data.localUser
Puting it into a .then function after the firebase.auth().onAuthStateChanged( (user) => {} function like in the code below, which actually worked but I can't do it with .then, I have to do it inside of:
firebase.auth().onAuthStateChanged( (user) => {}
firebase.auth().createUserWithEmailAndPassword(this.email, this.password).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorMessage);
}).then(() => {
firebase.auth().onAuthStateChanged( (user) => {
if (user) {
// If already signed in
const db = firebase.firestore();
this.localUser = user;
console.log(this.localUser);
db.collection("users").doc(this.localUser.uid).set({
firstName: this.firstName,
lastName: this.lastName,
student: this.student,
teacher: this.teacher,
email: this.email,
password: this.password
})
.then(function() {
console.log("Document successfully written!");
})
.catch(function(error) {
console.error("Error writing document: ", error);
});
}
})
})
The code I use and in which the problem lies on line 96:
<template>
<div id="signup-form-con" v-if="!connected">
<form id="signup-form" #submit.prevent>
<input v-model='firstName' type="text" id="signup-name" placeholder='First name'><br />
<input v-model='lastName' type="text" id="signup-surname" placeholder='Last name'><br />
<input v-model='student' type="checkbox"><span class='checkbox-label'>Student</span>
<input v-model='teacher' type="checkbox"><span class='checkbox-label'>Teacher</span><br />
<input v-model='email' type="email" id="signup-email"><br />
<input v-model='password' type="password" placeholder='Password'>
<input v-model='confirmed' type="password" placeholder='Confirm'><br />
<span>Sign in instead</span>
<button #click='EmailSignIn'>Next</button>
</form>
<div class="auto-signup">
<span id="or-use">Or use</span>
<div class="buttons">
<button id="google-signup" #click='GoogleSignIn'>
<img src="" alt="" id="google-img-signup">
</button>
<button id="facebook-signup" #click='FacebookSignIn'>
<img src="" alt="" id="fb-img-signup">
</button>
</div>
</div>
</div>
</template>
<script>
export default {
name: "Form",
props: {
connected: false
},
data: function() {
return {
localUser: null,
firstName: null,
lastName: null,
student: false,
teacher: false,
email: null,
password: null,
confirmed: null
}
},
methods: {
EmailSignIn: function() {
firebase.auth().createUserWithEmailAndPassword(this.email, this.password).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
console.log(errorMessage);
firebase.auth().onAuthStateChanged( (user) => {
if (user) {
// If already signed in
const db = firebase.firestore();
// THE BUG - cannot access this.localUser
this.localUser = user;
console.log(this.localUser);
db.collection("users").doc(this.localUser.uid).set({
firstName: this.firstName,
lastName: this.lastName,
student: this.student,
teacher: this.teacher,
email: this.email,
password: this.password
})
.then(function() {
console.log("Document successfully written!");
})
.catch(function(error) {
console.error("Error writing document: ", error);
});
}
})
}).then(() => {
})
}
</script>
<style scoped lang="sass"></style>

Answer 1

I don't understand why you're executing all of the code (at least all that you show) in an error handler, but the reason you can't access the Vue context is the error handler [reformatted for clarity]:
firebase.auth()
.createUserWithEmailAndPassword(this.email, this.password)
.catch(function(error) {
// all your code is here
})
You can make the context match by changing that to an arrow function:
firebase.auth()
.createUserWithEmailAndPassword(this.email, this.password)
.catch((error) => {
// all your code is here
})