javascript - 如何在vuejs中访问对象内部的方法？

Question

我正在尝试按照谷歌文档在 vue 中使用谷歌登录，一切正常，但我无法访问 attachClickHandler 中的方法。

new Vue({
    el: '#loginModal',
    data: { ...
    },
    methods: {
        gInit: function() {
            gapi.load('auth2', function() {
                auth2 = gapi.auth2.init({
                    client_id: 'MY-Client-id.apps.googleusercontent.com',
                    cookiepolicy: 'single_host_origin',
                    //scope: 'additional_scope'
                });
                auth2.attachClickHandler(document.getElementById('googleBtn'), {},
                    function(googleUser) {
                        const profile = googleUser.getBasicProfile();
                        const gplusObj = {
                            name: profile.getName(),
                            email: profile.getEmail(),
                            provider: 'google',
                            image: profile.getImageUrl(),
                            provider_user_id: profile.getId()
                        };

                        this.socialLogin(gplusObj);
                    },
                    function(error) {
                        alert(JSON.stringify(error, undefined, 2));
                    });
            });
        },
        socialLogin: function(data) {
            axios.post(`${this.api}/api/sociallogin`, data)
                .then(res => {
                    console.log(res);
                }).catch(err => {
                    console.log(err);
                });
        },
    },
    mounted: function() {
        this.gInit();
    }

})

此处在 attachClickHandler() 中调用函数 socialLogin() 时出现错误 this.socialLogin is not a function 未定义。为什么这不起作用？

Answer 1

这是因为 this.socialLogin 调用位于回调函数中。这个函数创建了一个新的上下文，所以 this 改变了，不再是你的组件。使用箭头函数。他们不会改变这个。

编辑:像这样更改您的代码:

gInit() {
    gapi.load('auth2', () => {
        ...
        auth2.attachClickHandler(document.getElementById('googleBtn'), {}, (googleUser) => {
            ...
            this.socialLogin(gplusObj);
        }, (error) => {
            alert(JSON.stringify(error, undefined, 2));
        });
    });
},

有关该主题的更多信息:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions , 参见“不分开这个”。