Składnik Vuejs czekać na Facebook sdk załadować

Mam element, który pokazuje przycisk logowania lub nazwę użytkownika użytkownika z Facebooka. zależy od tego, czy jest zalogowany, czy nie.Składnik Vuejs czekać na Facebook sdk załadować

Teraz w tym komponentu I użyć zdarzenia

created

więc będę sprawdzić logowanie immidiatly. Kod w tworzone w skrócie:

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

błędu jest to, że mówi, że FB nie jest zdefiniowana, i na pewno ma rację, FB nie jest jeszcze załadowany.

obciążenie I facebook jak ten

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

Źródło

2016-08-15 Tzook Bar Noy

przenieść kod do swojej vuejs aplikacji. W przeciwnym razie użyj jakiegoś zdarzenia, aby powiadomić twoją aplikację, że fb jest gotowe. – vbranden

szukałem zawsze na odpowiedź na to.

Dzięki komentarzowi vbrandena udało mi się przekonać mnie, że działa dla mnie.

Co musisz zrobić, to zainicjować sdk na Facebooku w utworzonej metodzie. Następnie wywołaj logowanie z wnętrza funkcji fbAsyncInit.

Oto co pracował dla mnie:

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

Źródło

2016-09-17 12:03:18 aljaydavids

Ten problem można rozwiązać przez stworzenie wtyczki vuejs.

Proszę sprawdzić related answer w pliku nuxt.js.

tworzyć wtyczki 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' 
})

Źródło

2017-07-05 17:20:09 ChaoTangChang

Składnik Vuejs czekać na Facebook sdk załadować

Odpowiedz

Powiązane problemy