Question

我正在为我的网络应用程序构建一个客户社交登录页面，而且我遇到了一个我无法找到原因的错误。

基本上，我想调用一个名为＆＃34; connectFb＆＃34;的函数。然后，如果所有Facebook API调用都成功，我想在我的vue实例中更改一堆数据以呈现其他元素。（通过v-if有条件地获得这些数据）

这是我的代码中负责此事的部分：

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

守则的运作方式：

基本上，在用户登录到fb之后，它会获得他的页面列表，这不是问题，问题是在它之后的成功回调（与函数获取页面相关的回调）。使用调试器我可以看到变量页面包含我需要的所有数据，pages.data返回这些页面信息的数组。

在此之后，我尝试将其归因于名为pages_fb的实例变量。 此代码运行时pages_fb始终为空，即使pages.data不是。

问题不仅在于pages_fb，还在于我的所有实例变量都应该在回调运行后在回调中发生变化。

我对这个问题很生气，所以请帮助我理解错误。

Answer 1

非常常见的错误。 this回调中定义的FB.login不是Vue。使用箭头函数，闭包或bind使其正确。

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

请参阅How to access the correct this inside a callback?

Answer 2

在回调中使用this.时，它不再指向您的Vue实例。您可以使用=>函数以您希望的方式绑定它。试试这个：

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

无法更改Vue实例数据值

2 个答案: