[Vuejs]-Accessing options in single file Vue components

by

2👍

✅

I believe you are asking about the data properties defined inside data of your Vue component.

You just have to do this.users, this.currentUser, this.quizzes, etc.

If you have trouble, it is probably because you are not using arrow functions yet.

When you do function() {…}, it creates a new scope inside, and your this inside function is not the same as this of Vue component. Then you will not be able to set your data properties using this.currentUser, etc.

Instead you should use () => {...} – this works like function but does not create a scope inside.

If you have a function argument, you can do response => {...} or (arg1, arg2) => {...}

So, at all places within your Vue app, you can start doing as follows:

created: function() {
    firebase.auth().onAuthStateChanged(user => {
        if (user) {
            // Set this user info in Vue component, so it becomes visible to your template 
            this.currentUser = user;
            // and so on...

Let me know if this solves the issue.

👤Mani

Leave a comment