[英]Vue + Leaflet: Can't call method inside Vue object
I'm using Vue and Leaflet for displaying polygons (zones) on a map. 我正在使用Vue和Leaflet在地图上显示多边形(区域)。 Further I want appropriate information (messages) about the specific polygons to be displayed after clicking on them on the map with the polygon.on function. 此外,我希望在使用polygon.on功能在地图上单击特定多边形之后,显示有关特定多边形的适当信息(消息)。 But it seems that I can not call the getMessages function at that point, I always get the message "Cannot read property 'call' of undefined" . 但是似乎我当时无法调用getMessages函数,总是收到消息“无法读取未定义的属性'call'” 。 Someone has an idea how I can make this work? 有人知道我如何进行这项工作?
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: '© <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']);
});
}
}
})
You're confusing the concepts of function references and function calls. 您会混淆函数引用和函数调用的概念。 Read Leaflet marker event fires at wrong time - even if the question and setup is different, the solution is the same. Read Leaflet标记事件在错误的时间触发 -即使问题和设置不同,解决方案也相同。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.