Vue-Instanz Datenwerte können nicht geändert werden

Question

Ich baue eine custon soziale Anmeldeseite für meine Webanwendung, und ich bin mit einem Bug fest, ich kann nicht finden, warum es ist.

Grundsätzlich möchte ich eine Funktion namens "connectFb" aufrufen und wenn alle Facebook-API-Aufrufe erfolgreich sind, möchte ich eine Reihe von Daten in meiner Vue-Instanz ändern, um andere Elemente zu rendern. (Diese sind bedingt durch v-wenn rendred)

Hier ist der Teil meines Codes verantwortlich:

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

wie der Code funktioniert:

Grundsätzlich, nachdem der Benutzer angemeldet ist zu fb, es wird eine Liste seiner Seiten bekommen, das ist nicht das Problem, das Problem ist in den Erfolg Rückruf nach ihm (der Rückruf im Zusammenhang mit der Funktion Seiten abrufen). Mit dem Debugger konnte ich sehen, dass die Variablenseiten alle benötigten Daten enthalten und pages.data ein Array dieser Seiteninfo zurückgibt.

Danach versuche ich, es meiner Instanzvariable namens pages_fb zuzuschreiben. , wenn dieser Code ausgeführt pages_fb ist immer leer, obwohl pages.data nicht ist.

Das Problem ist nicht nur mit pages_fb sondern auch mit all meinen Instanzvariablen, die in der Callback ändern sollten sie gleich nach dem Rückruf Laufe sind.

Ich bin wütend auf dieses Problem, also bitte helfen Sie mir zu verstehen, was los ist.

Answer 1

Extrem häufiger Fehler. this in Ihrem FB.login Callback definiert ist nicht die Vue. Verwenden Sie eine Pfeilfunktion, Schließung oder bind, um es richtig zu machen.

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

Siehe How to access the correct this inside a callback?

Answer 2

Wenn Sie this. in einem Rückruf verwenden wird es nicht mehr auf Ihr Vue Beispiel zeigt. Sie können Benutzer => Funktionen verwenden, um dies zu binden, wie Sie möchten. Versuchen Sie folgendes:

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