Vue.js Vuejs 组件等待 facebook sdk 加载

发布于09月17日

我有一个显示facebook用户登录按钮或用户名的组件.

现在在这个组件中，我使用

created

事件，所以我将立即判断登录.

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

错误在于它说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>

推荐答案

我一直在寻找答案.

根据vbranden的 comments ，我能够让它为我工作.

你需要做的是在创建的方法中初始化facebook sdk.

以下是对我有用的东西:

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