Cannot call function in Vuejs when using SDK JavaScript?

Question

I try to using JavaScript SDK in Vuejs, I use login facebook button:

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

However, I cannot see result. How can I fix this error?

Please show all of your Vue code. Where is your Vue instance, Vue component etc? — skribe
– skribe, Commented Mar 14, 2018 at 8:09
I just write one component, have a login with facebook button. I only want to try to show something after login success. I login success to facebook, but it cannot show something in console.log — Corey
– Corey, Commented Mar 14, 2018 at 8:17

Ohgodwhy · Accepted Answer · 2018-03-14 09:38:38Z

1

This is because the Facebook SDK only knows about the function in the window scope, your function is in the local scope. This is true for so many, many other libraries. The solution is to bind this to the window when you create / mount the component.

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

Now your local component method will be called when the onlogin event is returned from the FB api.

Alternatively you can use other binding syntaxes, or just build the button yourself.

answered Mar 14, 2018 at 9:38

Ohgodwhy

50.8k11 gold badges86 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Corey Over a year ago

Thank you so much. I didn't know window and local scope =))

Collectives™ on Stack Overflow

Cannot call function in Vuejs when using SDK JavaScript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related