從匿名函數訪問 Vue 方法

Question

我只是在玩 Vue.js（對 javascript 也很陌生）並嘗試訪問我的 Google 日歷中的事件。

在控制台中查看時，我一直在“未定義”。

    new Vue({
    el: '#app',
    data: {
        client_id: 'my_client_id',
        scopes: ["https://www.googleapis.com/auth/calendar.readonly"],
        events: {
            title: 'Upcoming Events',
            items: [],
        }
    },
    created: function () {
        this.loadCalendarApi();
    },
    methods: {
        addEvent: function (event) {
            this.events.items.push({
                title: event.summary,
                date: event.start.dateTime
            });
        },
        loadCalendarApi: function () {
            gapi.client.load('calendar', 'v3', this.listUpcomingEvents);
        },
        listUpcomingEvents: function () {
            var request = gapi.client.calendar.events.list({
                'calendarId': 'primary',
                'timeMin': (new Date()).toISOString(),
                'showDeleted': false,
                'singleEvents': true,
                'maxResults': 10,
                'orderBy': 'startTime'
            });
            var events = this.requestEvents(request);
            console.log(events);
        },
        requestEvents: function (request) {
            return request.execute(function (resp) {
                resp.items;
            });
        },
    },
});

我認為有問題的代碼在 requestEvents 方法中的某個地方。

我也知道 'this.addEvent' 不在能夠從 request.execute 函數內部引用 Vue 對象的范圍內，但我不知道我需要更改什么。

誰能幫助我或讓我知道我做錯了什么？

謝謝！

Answer 1

有兩種方法可以做到這一點，一種是將execute(function)更改為execute(function, vue)並將this作為第二個參數傳遞。 然后你可以像這樣訪問它：

//update your execute function to pass along the vue variable into the response, then

requestEvents: function (request) {
        var events = request.execute(function (resp, vue) {
            for (i = 0; i < resp.items.length; i++) {
                vue.addEvent(resp.items[i]);
            }
        }, this);
        return events;
    }

或者如果你有可用的 jQuery，你可以看看$.proxy()改變一個函數來使用當前上下文： https ://api.jquery.com/jQuery.proxy/

requestEvents: function (request) {
        var events = request.execute($.proxy(function (resp) {
            for (i = 0; i < resp.items.length; i++) {
                this.addEvent(resp.items[i]);
            }
        }, this));
        return events;
    }

這樣匿名響應函數將在 Vue 對象的上下文中運行。

編輯：我也找到了這個頁面，它展示了如何使用原生 JS、jQuery 或 Underscore 將當前上下文綁定到一個函數。 這些中的任何一個都可以工作： https ://jsperf.com/bind-vs-jquery-proxy/5

Answer 2

現在您可以使用 request => {} 表示法而不是 function(request) {} 表示法，它將上下文傳遞給執行方法，因此 this.AddEvent() 將按預期工作。