How to set the data json property in VueJS to the object from the Facebook response?

Question

Vue.js

<script type="text/javascript">
        new Vue({
            el: '#app',
            data: [],
            methods: {
                connectToFacebook: function() {
                    FB.login(function(response) {
                        if (response.authResponse) {
                            $.getJSON("{{ route('callback') }}", function(data){
                                console.log(data[0]);
                            });
                        } else {
                            return false;
                        }
                    });
                }
            }
        });
    </script>

    <script>
        window.fbAsyncInit = function() {
          FB.init({
            appId: '{{ env('FACEBOOK_APP_ID') }}',
            cookie: true, // This is important, it's not enabled by default
            version: 'v2.8'
          });
        };
      (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    </script>

Console.log(data[0]) - in 1-2 seconds issues an object
And then the question. I can’t assign the value of the received json-a to the data property in any way ???

Answer 1

data: {
            facebookData:null
        },
        methods: {
            connectToFacebook: function() {
                var self = this;
                FB.login(function(response) {
                    if (response.authResponse) {
                        $.getJSON("{{ route('callback') }}", function(data){
                            console.log(data[0]);
                            self.facebookData = data;
                        });
                    } else {
                        return false;
                    }
                });
            }
        }

But this is without arrow functions, I unfortunately do not use the new ecmascript. I hope one of the front-enders writes more beautifully.

Answer 2

I can’t assign the value of the received json-a to the data property in any way ???

Something in your code example is not visible so that you assign something to the data property at all. But common sense and a little intuition suggest that a couple of nested ones function(){...function(){..do not leave a trace of the context in which data is located, respectively, you received json, but assign a value to something wrong. Use arrow functions to avoid such problems in the future.