我使用nuxt（vue.js）。如何使用facebook sdk？ [英] I use nuxt(vue.js). how to use facebook sdk?

问题描述

我是韩国人。 ：

您可以使用我的代码。

npm install vue init nuxt / koa my-project（koa @ 2）

  pages 
 
 |  -  login.vue 
 
< script> 
 export default {
 name：'login'，
 method：{
 login（）{
 let vm = this 
 FB.login（function响应）{
 vm.statusChangeCallback（response）
}，{scope：'publish_actions'}）
} 
}，
 mounted（）{
 console.log（'mounted'）
 let vm = this 
 window.fbAsyncInit =（）=> {
 FB.init（{
 appId：'my-facebook-app-id'，
 cookie：true，
 xfbml：true，
 version：'v2 .8'
}）
 FB.getLoginStatus（function（response）{
 vm.statusChangeCallback（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> 
  

但是，

sdk.js：96未捕获TypeError：vm.statusChangeCallback不是函数

使用nuxt项目（nuxt / koa） git - nuxt / koa ，
什么是使用Facebook SDK的最佳方法？

请回答我的问题。

谢谢。

解决方案

我今天遇到同样的问题。这是我的解决方案与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'，
 autoLogAppE通风口：true，
 xfbml：true，
 version：'v2.9'
}）
  

我们可以使用 Vue.FB 在FB SDK中调用方法，并收听 fb-sdk-ready 事件在这样的任何组件：

  export default {
 data：function（）{
 return {isFBReady：false} 
}，
 installed：function（）{
 this.isFBReady = Vue.FB！= undefined 
 window.addEventListener（'fb- sdk-ready'，this.onFBReady）
}，
 beforeDestroy：function（）{
 window.removeEventListener（'fb-sdk-ready'，this.onFBReady）
} ，
方法：{
 onFBReady：function（）{
 this.isFBReady = true 
} 
} 
} 
  




I am korean. :)

You can my code.

npm install vue init nuxt/koa my-project (koa@2)

pages

 |- login.vue

<script>
export default {
  name: 'login',
  method: {
    login () {
      let vm = this
      FB.login(function (response) {
        vm.statusChangeCallback(response)
      }, {scope: 'publish_actions'})
    }
  },
  mounted () {
    console.log('mounted')
    let vm = this
    window.fbAsyncInit = () => {
      FB.init({
        appId: 'my-facebook-app-id',
        cookie: true,
        xfbml: true,
        version: 'v2.8'
      })
      FB.getLoginStatus(function (response) {
        vm.statusChangeCallback(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>

but,

sdk.js:96 Uncaught TypeError: vm.statusChangeCallback is not a function

When using the nuxt project(nuxt/koa) git - nuxt/koa, What is the best way to use the Facebook SDK?

Please answer my question.

Thanks.

解决方案

I running into the same problem this day. Here is my solution with nuxt.js

First create a 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'
})

We can use Vue.FB to invoke methods in FB SDK and listen to the fb-sdk-ready event in any component like this:

export default{
    data: function () {
        return {isFBReady: false}
    },
    mounted: function () {
        this.isFBReady = Vue.FB != undefined
        window.addEventListener('fb-sdk-ready', this.onFBReady)
    },
    beforeDestroy: function () {
        window.removeEventListener('fb-sdk-ready', this.onFBReady)
    },
    methods: {
        onFBReady: function () {
          this.isFBReady = true
        }
    }
}

这篇关于我使用nuxt（vue.js）。如何使用facebook sdk？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！