2

我尝试在 Quasar Framework 上使用https://github.com/phanan/vue-facebook-signin-button组件，我已经使用 npm 安装了它：

npm i vue-facebook-signin-button --save

我穿上了main.js：

import FBSignInButton from 'vue-facebook-signin-button'
Vue.use( FBSignInButton ) // use facebook signin button

然后我添加了主.vue文件：

<template>
  <q-layout>
    <div class="layout-view">
      <fb-signin-button
        :params="fbSignInParams"
        @success="onFbSignInSuccess"
        @error="onFbSignInError">
        Sign in with Facebook
      </fb-signin-button>
    </div>
   </q-layout>
 </template>
<script>
  // Facebook
  var FB;
  window.fbAsyncInit = function() {
    FB.init( {
      appId: process.env.FB_APPID,
      cookie: true,  // enable cookies to allow the server to access the session
      xfbml: true,  // parse social plugins on this page
      version: 'v2.8' // use graph api version 2.8
    } )
  }
  (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' ))

  export default {
    store,
    data () {
      return {
        fbSignInParams: {
          scope: '',
          return_scopes: true
        }
      }
    },
    computed: {},
    methods: {
      onFbSignInSuccess ( response ) {
        console.log( 'res', response )
        FB.api( '/me', dude => {
          console.log( 'dude', dude )
          console.log( `Good to see you, ${dude.name}.` )
        } )
      },
      onFbSignInError ( error ) {
        console.log( 'OH NOES', error )
      }
    }
  }
</script>

但它给出了一个运行时错误：

(unknown) [Vue warn]: Unknown custom element: <fb-signin-button> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Index> at /home/asd/SPA/src/components/Index.vue
       <App> at /home/asd/SPA/src/App.vue
         <Root>

还有另一个错误fbAsyncInit：

sdk.js:96 Uncaught TypeError: Cannot read property 'init' of undefined
    at window.fbAsyncInit (eval at <anonymous> (0.6374f77….js:243), <anonymous>:10:5)
    at v.__wrapper (sdk.js:96)
    at sdk.js:140
4

2 回答 2

2

FBSignInButton 是一个 Vue 组件，因此您需要做的是导入它并将其添加到您的组件中，如下所示：

import FBSignInButton from 'vue-facebook-signin-button'

export default {
   ...,
   components: {
     ...,
     FBSignInButton
   },
   ...
}

您需要将其声明为组件，否则 Vue 将不知道它。

于 2017-08-09T14:17:48.170 回答
0

每当存在未注册 vue 组件的未识别 html 标签时，就会发生此错误。这个问题的一种解决方案是创建一个 fb 登录按钮的 vue 包装器并实现该功能。

通过此链接一次。

示例代码

于 2017-05-26T05:48:38.000 回答