使用SDK JavaScript时无法在Vuejs中调用函数？

Question

我尝试在Vuejs中使用JavaScript SDK，我使用登录facebook按钮：

<template>
  <div>
  <div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="login_with" data-show-faces="false" data-auto-logout-link="true" data-use-continue-as="false" onlogin="checkLoginState();">
  </div>
 </div>
</template>
<script>
  export default {
   data() {
     return: { }
   },
   methods: {
    checkLoginState: function() {
      console.log("logged")
     }
   }
  }
</script>

然而，我看不到结果。我该如何解决这个错误？

Answer 1

这是因为Facebook SDK只知道window范围内的功能，您的功能位于local scope。这对许多其他图书馆来说都是如此。解决方案是在创建/安装组件时将其绑定到窗口。

created() {
    window.checkLoginState = this.checkLoginState
}

现在，当从onlogin api返回FB事件时，将调用您的本地组件方法。

或者，您可以使用其他绑定语法，或者自己构建按钮。