Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

Can't change Vue Instance data values – Facebook api

I’m building a custon social login page for my web application, and I’m stuck with a bug I can’t find why it’s hapenning .

Basically, I want to call a function called “connectFb” and then if all the Facebook API calls are successful, I would like to change a bunch of data in my vue instance in order to render other elements . (those are rendred conditionally via v-if)

Here’s the part of my code responsible for this : 

app = new Vue({
    el : "#social-auth",
    data: {
        showTwitter : false,
        showFb: true,
        showPages: false,
        fb_state: "unconnected",
        continue_auth: false,
        pages_fb: []
    },
    methods : {
        connectFb: function() {
    FB.login(function(response) {
      if (response.authResponse) {
        alert('You are logged in & cookie set!');
        fb_token = response.authResponse.accessToken
        FB.api('/me/accounts','get',{access_token: fb_token},function(pages){
            if(pages["error"] !== undefined){
               console.log('EROR')
            }
            else{
                console.log("Got a list of pages");
                console.log(pages);
               this.pages_fb = pages.data;
               this.showFb = false;
               this.showPages = true;
               this.continue_auth = true;
            }
       })


      } else {
        alert('User cancelled login or did not fully authorize.');
      }
    },{scope: 'public_profile,manage_pages'});
    return false;
  }

How The Code Works :

Basically, after the user is logged in to fb, it will get a list of his pages, this is not the problem, the problem is in the success callback after it (the callback related to the function fetching pages) . using the debugger I could see that the variable pages contains all the data I need and pages.data return an array of those pages info .

After this I’m trying to attribute it to my instance variable called pages_fb . when this code run pages_fb is always empty even though pages.data is not .

The problem is not only with pages_fb but also with all my instance variable that should change in the callback they are the same after the callback run .

I’m getting mad at this problem, so please help me understand what’s wrong .

Tags:

2

Answers


  1. 0

    Extremely common mistake. this defined in your FB.login callback is not the Vue. Use an arrow function, closure, or bind to make it correct.

    FB.api('/me/accounts','get',{access_token: fb_token}, pages => {
  ...
})

    See How to access the correct this inside a callback?

    Login or Signup to reply.
  2. 0

    When you use this. in a callback it isn’t pointing to your Vue instance anymore. You can user => functions to bind this the way you want. Try this:

    FB.api('/me/accounts','get',{access_token: fb_token},(pages) => {
        if(pages["error"] !== undefined){
           console.log('EROR')
        }
        else{
            console.log("Got a list of pages");
            console.log(pages);
           this.pages_fb = pages.data;
           this.showFb = false;
           this.showPages = true;
           this.continue_auth = true;
        }
   })
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search