Vue + Leaflet：无法在 Vue 对象中调用方法答案

【问题标题】：Vue + Leaflet: Can't call method inside Vue objectVue + Leaflet：无法在 Vue 对象中调用方法
【发布时间】：2016-06-15 00:20:09
【问题描述】：

我正在使用 Vue 和 Leaflet 在地图上显示多边形（区域）。此外，我希望使用 polygon.on 功能在地图上单击特定多边形后显示有关特定多边形的适当信息（消息）。但似乎我此时无法调用 getMessages 函数，我总是收到消息“无法读取未定义的属性'调用'”。有人知道我怎样才能完成这项工作吗？

var map = new Vue ({
    el: '#messagearea',
    data: {
        function() {
        return {
            map: false
        };
    },
        zones: [],
        messages:[],
    },
    ready: function() {
    this.map = L.map('map').setView([51.959, 7.623], 14);
    L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(this.map);
        this.$http.get('/api/zones', function(data) {
            this.$set('zones', data);
            for (var i = 0; i < this.zones['Zones'].length; i++) {
                    polygon = L.polygon(
                    this.zones['Zones'][i]['Geometry']['Coordinates']).addTo(this.map);
                    polygon.bindPopup(this.zones['Zones'][i]['Name']);
                    polygon.on('click', this.getMessages(this.zones['Zones'][i]['Zone-id']));                     
                }
        });
    },
    methods:
    {
        getMessages: function(id) {
        this.$http.get('/api/messages?zone='+id, function(data) {
            this.$set('messages', data['Messages']);
        });
    }
    }
})

【问题讨论】：

标签： javascript leaflet vue.js

【解决方案1】：

您混淆了函数引用和函数调用的概念。阅读Leaflet marker event fires at wrong time - 即使问题和设置不同，解决方案也是一样的。

【讨论】：