javascript - 无法更改 Vue 实例数据值

Question

我正在为我的网络应用程序构建一个自定义社交登录页面，但我遇到了一个错误，我找不到它发生的原因。

基本上，我想调用一个名为“connectFb”的函数，然后如果所有 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 & 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包含我需要的所有数据并且pages.data返回这些页面info的数组。

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

问题不仅在于pages_fb，还在于我所有应该在回调中更改的实例变量，它们在回调运行后是相同的。

我对这个问题很生气，所以请帮助我了解问题所在。

Answer 1

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

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

参见How to access the correct this inside a callback?