Компонент Vuejs ожидает загрузки facebook sdk

У меня есть компонент, который показывает кнопку входа в систему или имя пользователя пользователя из facebook. зависит от того, вошел ли он в систему или нет.Компонент Vuejs ожидает загрузки facebook sdk

Теперь в этом компоненте я использую событие

created

, так что я буду проверять логин immidiatly. код в созданный в краткой:

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

ошибка в том, что он говорит, что FB не определен, и уверен, что он прав, FB еще не загружен.

facebook Я нагрузки, как этот

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

источник

2016-08-15 Tzook Bar Noy

переместим код в ваш vuejs приложение. В противном случае используйте некоторые события, чтобы уведомить приложение о готовности fb. – vbranden

Я искал навсегда для ответа на это.

Комментарий от Thanx to vbranden Я смог заставить его работать для меня.

Что вам нужно сделать, это инициализировать sdf в facebook в созданном методе. Затем вызовите логин из функции fbAsyncInit.

Вот что работает для меня:

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

источник

2016-09-17 12:03:18 aljaydavids

Эта проблема будет решить путем создания vuejs плагин.

Пожалуйста, проверьте related answer в nuxt.js.

создать плагин 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' 
})

источник

2017-07-05 17:20:09 ChaoTangChang

Компонент Vuejs ожидает загрузки facebook sdk

ответ

Смежные вопросы