Vue + 전단 : Vue 객체 내부에서 메서드를 호출 할 수 없습니다.

Question

지도에서 다각형 (영역)을 표시하기 위해 Vue 및 전단지를 사용하고 있습니다. 또한 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']); 
     }); 
    } 
    } 
}) 

Answer 1

함수 참조 및 함수 호출의 개념을 혼란스럽게합니다. Leaflet marker event fires at wrong time 읽기 - 질문과 설정이 다르더라도 해결책은 같습니다.