Vue + Leaflet: Methode kann nicht innerhalb des Vue-Objekts aufgerufen werden

Question

Ich verwende Vue und Leaflet zur Anzeige von Polygonen (Zonen) auf einer Karte. Weiter möchte ich entsprechende Informationen (Nachrichten) über die spezifischen Polygone anzeigen, nachdem sie auf der Karte mit der Funktion polygon.on auf sie geklickt haben. Aber es scheint, dass ich die Funktion getMessages an diesem Punkt nicht aufrufen kann, bekomme ich immer die Nachricht "Kann nicht lesen 'Aufruf' von undefined". Hat jemand eine Idee, wie ich das schaffen kann?

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']); 
     }); 
    } 
    } 
}) 

Answer 1

Sie verwechseln die Konzepte von Funktionsreferenzen und Funktionsaufrufen. Lesen Sie Leaflet marker event fires at wrong time - auch wenn die Frage und das Setup unterschiedlich ist, ist die Lösung die gleiche.