如何在Vue.js中訪問對象內部的方法？

Question

我正在嘗試通過遵循Google文檔在Vue中使用Google登錄，並且一切正常，但是我無法訪問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();
    }

})

這里調用一個函數socialLogin()內attachClickHandler()是給錯誤this.socialLogin is not a function沒有定義。 為什么這不起作用？

Answer 1

這是因為this.socialLogin調用位於回調函數中。 此函數創建了一個新的上下文，因此this發生變化，不再是您的組件。 使用箭頭功能。 他們不會改變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 ，請參閱“對此不做任何區分”。

Answer 2

由於您沒有保存this ，請嘗試：

 new Vue({ el: '#loginModal', data: { ... }, methods: { gInit: function() { let self = this // new added 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() }; console.log(e); self.socialLogin(gplusObj); //updated }, 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(); } }) 

this不會自動通過，在學習vue之前您應該已經知道這一點。

另外，您可以使用arrow function來避免this更改：

 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'), {}, (googleUser) => { //updated const profile = googleUser.getBasicProfile(); const gplusObj = { name: profile.getName(), email: profile.getEmail(), provider: 'google', image: profile.getImageUrl(), provider_user_id: profile.getId() }; console.log(e); 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(); } })