VueJS this.progress is undefined inside window function

Question

I'm using a Facebook login and I'm showing progress loading for the user until I get a response back from Facebook for authentication. But I used to hide the progress bar like this.progress = false but this variable is undefined inside the window function.

My code :

initFacebook() {
    this.progress=true
      window.fbAsyncInit = function() {
        window.FB.init({
          appId: "MY-APP-ID", //You will need to change this
          cookie: true, // This is important, it's not enabled by default
          version: "v2.6",
          status: false,
        });
        
        window.FB.login(function(response) {
          
        if (response.status === 'connected'){

        window.FB.api('/me?fields=id,name,email', function(response) {
        console.log( response) // it will not be null ;)
    })
     
        } else {
          console.log("User cancelled login or did not fully authorize.")         

        }

      },
      
      {scope: 'public_profile,email'}
      );
    this.progress = false
console.warn(this.progress)

      };

    },

I'm unable to set this.progress = false after getting all responses from Facebook.

I get an error while I console.log(this.progress) variable.

Error :

Login.vue?7463:175 undefined

How can I set this.progress variable to false once the authentication checks are complete?

Hey you might want to use an arrow function () => instead of a function () {} — mahatmanich, Oct 29 '21 at 09:45
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions — mahatmanich, Oct 29 '21 at 10:17

mahatmanich · Answer 1 · 2021-10-29T10:07:09.607

Try converting all function() calls into arrow function calls () =>

The problem is that a function() will break the global vue scope. So vue this is not available within a function() call, but it is available within an arrow function () => {}

In a block scope (function() { syntax), this is bound to the nested scope and not vue's this instance. If you want to keep vues this inside of a function, use an arrow function (ES6) or you can have const that = this and defer the global this to that in a regular function() { if you prefer it this way.

Try using this code converted with arrow functions and see if it works:

initFacebook() {
  this.progress=true
    window.fbAsyncInit = () => {      
      window.FB.init({
        appId: "MY-APP-ID", //You will need to change this
        cookie: true, // This is important, it's not enabled by default
        version: "v2.6",
        status: false,
      });

      window.FB.login((response) => {            
        if (response.status === 'connected'){
          window.FB.api('/me?fields=id,name,email', (response) => {
            console.log( response) // it will not be null ;)
          })     
        } else {
          console.log("User cancelled login or did not fully authorize.")
        }
      },      
    {scope: 'public_profile,email'});
    this.progress = false
    console.warn(this.progress)
  };
},

I know this because I just had the same problem :-) see here: Nuxt plugin cannot access Vue's 'this' instance in function blocks

VueJS this.progress is undefined inside window function

1 Answers1