Can't change Vue Instance data values

Question

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 &amp; 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 .

Bert · Accepted Answer · 2017-09-22T15:28:48.957

1

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?

edited Sep 22 '17 at 15:28

answered Jul 02 '17 at 19:59

Bert

80,741
17
199
164

Thank's for your answer, you're right, the problem was with `this` , I would like to note that for someone using an old browser like me, you should attribute this to `self` in the larger scope, and then use `self` instead of `this` . – Anis Souames Jul 02 '17 at 20:37
@AnisSouames using `self` is using a closure, which is in the answer :) – Bert Jul 02 '17 at 20:39

score 1 · Answer 2 · answered Jul 02 '17 at 19:59

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;
        }
   })

Can't change Vue Instance data values

2 Answers2