Vuejs Komponente warten auf Facebook sdk laden

Ich habe eine Komponente, die eine Login-Schaltfläche oder den Benutzernamen des Benutzers von Facebook zeigen. hängt davon ab, ob er eingeloggt ist oder nicht.Vuejs Komponente warten auf Facebook sdk laden

nun in dieser Komponente verwende ich das

created

Ereignis so dass ich immidiatly die Login überprüfen würde. Code in in einem kurzen erstellt:

FB.getLoginStatus(function(response) { 
    //more things.....

der Fehler ist, dass er sagt, dass FB nicht definiert ist, und sicher, dass er richtig ist, wird FB noch nicht geladen.

I load facebook wie diese

<body> 
<script> 
    window.fbAsyncInit = function() { 
    FB.init({ 
    appId  : '1111111111', 
    xfbml  : true, 
    version : 'v2.7' 
    }); 
}; 

(function(d, s, id){ 
var js, fjs = d.getElementsByTagName(s)[0]; 
if (d.getElementById(id)) {return;} 
js = d.createElement(s); js.id = id; 
js.src = "//connect.facebook.net/en_US/sdk.js"; 
fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); 
</script>

Quelle

2016-08-15 Tzook Bar Noy

Bewegen Sie den Code in Ihre vuejs App erstellen. Ansonsten nutze etwas Event, um deine App zu benachrichtigen, dass fb bereit ist. – vbranden

Ich war auf der Suche immer eine Antwort auf diese Frage.

Danke an vbranden's Kommentar Ich konnte es für mich arbeiten lassen.

Was Sie tun müssen, ist die facebook sdk in der erstellten Methode zu initialisieren. Dann rufen Sie die Anmeldung von innerhalb der Funktion fbAsyncInit.

Hier ist, was für mich gearbeitet:

<body> 
<div id="test"></div> 

<script> 
new Vue({ 
    el: '#test', 
    created: function() { 
    console.log('created main'); 
    window.fbAsyncInit = function() { 
     FB.init({ 
     appId  : '1111111111', 
     xfbml  : true, 
     version : 'v2.7' 
     }); 

     //This function should be here, inside window.fbAsyncInit 
     FB.getLoginStatus(function(response) { 
     console.log(response); 
    }); 

    }; 

    (function(d, s, id){ 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) {return;} 
    js = d.createElement(s); js.id = id; 
    js.src = "//connect.facebook.net/en_US/sdk.js"; 
    fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk')); 
    } 
}); 

</script> 
</body>

Quelle

2016-09-17 12:03:18 aljaydavids

Dieses Problem ein, indem Sie eine vuejs Plugin lösen werden.

Bitte überprüfen Sie die related answer in nuxt.js.

ein Plugin plugins/fb-sdk.js

const vue_fb = {} 
vue_fb.install = function install(Vue, options) { 
    (function(d, s, id){ 
     var js, fjs = d.getElementsByTagName(s)[0] 
     if (d.getElementById(id)) {return} 
     js = d.createElement(s) 
     js.id = id 
     js.src = "//connect.facebook.net/en_US/sdk.js" 
     fjs.parentNode.insertBefore(js, fjs) 
     console.log('setting fb sdk') 
    }(document, 'script', 'facebook-jssdk')) 

    window.fbAsyncInit = function onSDKInit() { 
     FB.init(options) 
     FB.AppEvents.logPageView() 
     Vue.FB = FB 
     window.dispatchEvent(new Event('fb-sdk-ready')) 
    } 
    Vue.FB = undefined 
} 

import Vue from 'vue' 

Vue.use(vue_fb, { 
    appId: 'your-app-id', 
    autoLogAppEvents: true, 
    xfbml: true, 
    version: 'v2.9' 
})

Quelle

2017-07-05 17:20:09 ChaoTangChang

Vuejs Komponente warten auf Facebook sdk laden

Antwort

Verwandte Themen