無法更改Vue實例數據值

我正在爲我的Web應用程序構建custon社交登錄頁面，並且我遇到了一個無法找到原因的bug。無法更改Vue實例數據值

基本上，我想調用一個名爲「connectFb」的函數，然後如果所有的Facebook API調用都成功了，我想在我的vue實例中更改一堆數據以渲染其他元素。（那些通過V-如果有條件rendred）

這裏是我的代碼負責此部分：

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，而且在回調運行後，它們在回調中應該改變的所有實例變量都是相同的。

我對這個問題感到生氣，所以請幫助我瞭解什麼是錯的。

來源

2017-07-02 Anis Souames

極其常見的錯誤。 this在您的FB.login回調中定義的不是Vue。使用箭頭函數，關閉或bind使其正確。

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

見How to access the correct this inside a callback?

來源

2017-07-02 19:59:35 Bert

感謝對你的回答，你是對的，問題是用'this'，我想指出，對於使用舊的瀏覽器，如我這樣的人，你應該歸結於這樣'self'在更大的範圍內，然後使用'self'而不是'this'。 –

@AnisSouames使用'self'使用閉包，這是在答案:) – Bert

當你在它沒有指向您的Vue的實例了回調使用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; 
     } 
    })

來源

2017-07-02 19:59:46

無法更改Vue實例數據值

回答

相關問題