从匿名函数访问Vue方法

时间:2016-01-11 19:33:15

标签: javascript vue.js

我只是玩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对象,但我不知道我需要更改什么。

任何人都可以帮助我或让我知道我做错了什么吗?

谢谢!

2 个答案:

答案 0 :(得分:3)

您可以采用两种方式,一种方法是将#include <stdio.h> #define DIM 100 int enter (int x[]); int min (int x[], int y[], int n); int sort (int x[], int n); void print (int x[], int n); //============================================= int main () { int a[DIM], b[DIM], n, i; n = enter (a); printf("The smallest element in the first array: %d.\n The smallest element in the second array: %d.\n", min (a, b, n)); printf("%d\n", sort (b, n)); for (i = 0; i < n; i++) printf ("%d ", b[i]); printf ("\n"); system("pause"); return 0; } //=========================================================== int enter (int x[]) { int i, n; do { printf ("Enter number of elements in array: "); scanf ("%d", &n); } while (n < 1 || n > DIM); printf ("Enter %d elements:\n", n); for (i = 0; i < n; i++) scanf ("%d", &x[i]); return x[i], n; } int min (int x[], int y[], int n) { int minimum, i, j=0, p; minimum = x[0]; for ( i = 1 ; i < n ; i++ ) { if ( x[i] < minimum ) { minimum = x[i]; p = i+1; } } for (i = p+1; i<n; i++ && j++) { x[i] = y[j]; } return minimum; } int sort (int x[], int n) { int i, j, a; for (i = 0; i < n; ++i) { for (j = i + 1; j < n; ++j) { if (x[i] > x[j]){ a = x[i]; x[i] = x[j]; x[j] = a; } } } printf("Elements from array in ascending order: \n"); for (i = 0; i < n; ++i) printf("%d\n", x[i]); return x[i]; } 更改为execute(function)并将execute(function, vue)作为第二个参数传递。然后你可以这样访问它:

this

或者如果你有jQuery可用,你可以看一下//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; } 改变一个函数来使用当前上下文:https://api.jquery.com/jQuery.proxy/

$.proxy()

这样,匿名响应函数将在Vue对象的上下文中运行。

编辑:我也找到了这个页面,它显示了如何使用本机JS,jQuery或Underscore将当前上下文绑定到函数。其中任何一个都可行:https://jsperf.com/bind-vs-jquery-proxy/5

答案 1 :(得分:1)

如今,您可以使用request => {}表示法代替function(request){}表示法,该表示法会将上下文传递给执行方法,因此this.AddEvent()将按预期工作。