link822 link823 link824 link825 link826 link827 link828 link829 link830 link831 link832 link833 link834 link835 link836 link837 link838 link839 link840 link841 link842 link843 link844 link845 link846 link847 link848 link849 link850 link851 link852 link853 link854 link855 link856 link857 link858 link859 link860 link861 link862 link863 link864 link865 link866 link867 link868 link869 link870 link871 link872 link873 link874 link875 link876 link877 link878 link879 link880 link881 link882 link883 link884 link885 link886 link887 link888 link889 link890 link891 link892 link893 link894 link895 link896 link897 link898 link899 link900 link901 link902 link903 link904 link905 link906 link907 link908 link909 link910 link911 link912 link913 link914 link915 link916 link917 link918 link919 link920 link921 link922 link923 link924 link925 link926 link927 link928 link929 link930 link931 link932 link933 link934 link935 link936 link937 link938 link939 link940 link941 link942 link943 link944 link945 link946 link947 link948 link949 link950 link951 link952 link953 link954 link955 link956 link957 link958

[Vue.js] Cannot access data variable from a function within a method

when 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

there is 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, there is 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>

Solution :

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.js context is the error handler [reformatted for clarity]:

firebase.auth()
.createUserWithEmailAndPassword(this.email, this.password)
.catch(function(error) {
// all the 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 the code is here
})