Vue + Leaflet：無法調用Vue對象內部的方法

Question

我正在使用Vue和Leaflet在地圖上顯示多邊形（區域）。此外，我希望在地圖上點擊地圖上的多邊形多邊形，並在函數中顯示關於要顯示的特定多邊形的適當信息（消息）。 但是，我似乎無法在此時調用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']); 
     }); 
    } 
    } 
}) 

Answer 1

你混淆了函數引用和函數調用的概念。閱讀Leaflet marker event fires at wrong time - 即使問題和設置不同，解決方案也是一樣的。