CODEWITHSUNDEEP
facebookvuejs2
Lech Migdal
Lech Migdal

Reputation: 3984

Exposing data from facebook SDK to VueJS

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

Upvotes: 1

Views: 1373

Answers (1)

Austio
Austio

Reputation: 6095

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

Upvotes: 2

Related Questions