Uncaught TypeError: Cannot set properties of undefined (setting 'isSubcon')

Question

need some help here.

I want my navigation drawer to display different contents based on the user types/roles of those who logged in.

But I encounter this error ("Uncaught TypeError: Cannot set properties of undefined (setting 'isSubcon'"). and my navigation drawer not displaying anything.

my template

<v-list v-if="isSubcon">
    //content of drawer if user that logged in is a "Subcon"
</v-list>

<v-list v-if="isWPC">
    //content of drawer if user that logged in is a "WPC"
</v-list>

<v-list v-if="isBWG">
    //content of drawer if user that logged in is a "BWG"
</v-list>

my script

data: () => ({
    isSubcon: false,
    isWPC: false,
    isBWG: false,
}),

// I think below is where the problem occurs.
created() {
    firebase
        .auth()
        .onAuthStateChanged((userAuth) => {
            if (userAuth) {
                firebase
                    .auth()
                    .currentUser.getIdTokenResult()
                    .then(function ({
                            claims,
                        }) {
                            if (claims.customer) {
                                this.isSubcon = true;  //HERE WHERE THE PROBLEM OCCURS (i think)
                            } else if (claims.admin) {
                                this.isWPC =true;  //THIS ALSO
                            } else if (claims.subscriber) {
                                this.isBWG = true;  //AND THIS ALSO
                            }
                           }
                        )
                }
            });
    },

I'm using Firebase Custom Claims to log in and Nuxt (mode: SPA) with Vuetify for the UI. So how can I remove the error, so that I can display the content to my nav drawer?

Thank you in advance :))

Does this answer your question? [Why is 'this' undefined inside class method when using promises?](https://stackoverflow.com/questions/34930771/why-is-this-undefined-inside-class-method-when-using-promises) — Christopher, Nov 23 '21 at 01:23
Supposedly but I'm not sure how to really implement it in my code haha. I put ```var that = this;``` above ```if (claims.customer)``` and changed ```this.isSubcon = true;``` to ```that.isSubcon = true;``` but it still pop out the same error. maybe you can show me in codes how to solve it, please? — , Nov 23 '21 at 01:42
oh I also do ```.then(this.isSubcon = true;)``` and remove the if-else statement below it just to test, it actually works. (so by doing that one is actually related to article that you gave). But how to do it inside my if-else statement and turn my ```v-if``` from ```false``` to ```true```. — , Nov 23 '21 at 01:55

Christopher · Accepted Answer · 2021-11-23T02:22:20.547

this depends always on the scope/object called and both properties data: () => ({ ... }) and created() seem to be properties of another object. If you invoke it with:

myObject.created();

then the solution below should do it.

created() {
  let that = this;
  firebase
   ...
    .then(function ({ claims }) {
      if (claims.customer) {
        that.isSubcon = true;  //HERE WHERE THE PROBLEM OCCURS (i think)
      } else if (claims.admin) {
        that.isWPC =true;  //THIS ALSO
      } else if (claims.subscriber) {
        that.isBWG = true;  //AND THIS ALSO
      }
    })
}

Uncaught TypeError: Cannot set properties of undefined (setting 'isSubcon')

1 Answers1