Exposing data from facebook SDK to VueJS - facebook

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