Exposing data from facebook SDK to VueJS

Question

I am trying to implement a simple login with facebook SDK functionality within a website that uses VueJS2.0.

The code that I have in the component that handles this is basically taken from FB SDK Quickstart:

onLoginPress() {
            FB.getLoginStatus(function(response) {
                if (response.status === 'connected') {
                    console.log('Logged in.');
                } else {
                    FB.login(function(response) {
                        if (response.authResponse) {
                            console.log('Welcome!  Fetching your information.... ');
                            FB.api('/me', function(response) {
                                console.log('Good to see you, ' + response.name + '.');
                            });
                        } else {
                            console.log('User cancelled login or did not fully authorize.');
                        }
                    });
                }
            });

Now I wonder - how should I provide the response from FB api back to the VueJS? I see that this inside those function calls points at the Window, but I dont have access to Vue.

Vue is initialized with the following code:

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App)
})

Answer 1

This is window there because the function that the FB executes is done within the global context.

To solve this, in the line before the first FB assign a variable to this, which will be your reference to the Vue instance.

let vm = this:
FB......

Then you can do normal dispatches and such from Vue via vm.someMethod()