在获得Axios，VUE JS + LEAFLET + Axios后，标记变量未定义

Question

Axios response.data没问题。但是当我在渲染中使用markers变量时，标记是未定义的。我是新手，非常需要你帮助我们的项目。

我正在尝试从代码中描述的链接渲染标记，但有些我将axios请求放在创建的中，而在mount中则是渲染小册子映射。

Screenshot of the code

<script>
/** Script Vue JS **/
new Vue({
  el: '#view-map',
  data: {
    map,
    map_link:'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    markerOption: {
      clickable: true,
      draggable: false
    },
    mapOptions: {
      center: [7.3087, 125.6841],
      zoom:8  
    },
    markers:[], //[{"image":"GMS-4-0112018-467_1527086274.jpg","derivation_code":"GMS-4-0112018-467","sample_description":"test 1 test is a test that test will be tested in test","latitude":"6.428152","longitude":"125.317857"},{"image":"GMS-1-0112018-963_1527134301.jpg","derivation_code":"GMS-1-0112018-963","sample_description":"nalaya lang","latitude":"7.311647","longitude":"125.636461"}],
    selectedSample: [],
  },
  methods: {
    getMarkers: function (){
        axios.get('http://127.0.0.1:8000/marker').then(response => {
                    this.markers = response.data;
            }).catch(error =>( console.log(error) ));
    },
    renderMarker: function(){
      for ( i = 0; i < this.markers.length; i++){
        console.log(this.markers[i]);
        var marker = new L.Marker([this.markers[i].latitude, this.markers[i].longitude], this.markerOption);
        marker.addTo(this.map);
        marker.bindPopup(`
            <h6 class="display-6">${this.markers[i].derivation_code}</h6>
            <img src="storage/images/${this.markers[i].image}" style="height:100%;width:100%">
        `);
      }
    },
    markerClicked: function(mrkr_data){
      this.selectedSample = mrkr_data.derivation_code;
      console.log(this.selectedSample);
    }
  },
  created: function(){
    this.getMarkers();
  },
  mounted: function(){
        this.map = new L.map('map', this.mapOptions);
        this.map.addLayer(new L.TileLayer(this.map_link));
        console.log(this.markers);
        this.renderMarker();
  }
});
</script>

Answer 1

我解决了我的问题。我将Axios get属性中的数据提取视为同步，但它是异步的。基于我之前的代码，我在未更新时访问了数据，因此值为空。

/** Script Vue JS **/
new Vue({
  el: '#view-map',
  data: {
    map,
    map_link:'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    markerOption: {
      clickable: true,
      draggable: false
    },
    mapOptions: {
      center: [7.3087, 125.6841],
      zoom:8  
    },
    markers:[], //[{"image":"GMS-4-0112018-467_1527086274.jpg","derivation_code":"GMS-4-0112018-467","sample_description":"test 1 test is a test that test will be tested in test","latitude":"6.428152","longitude":"125.317857"},{"image":"GMS-1-0112018-963_1527134301.jpg","derivation_code":"GMS-1-0112018-963","sample_description":"nalaya lang","latitude":"7.311647","longitude":"125.636461"}],
    selectedSample: [],
  },
  created: function(){
     this.getMarkers();
  },
  mounted: function(){
        this.map = new L.map('map', this.mapOptions);
        this.map.addLayer(new L.TileLayer(this.map_link));
  }, 
  watch: {
    markers: function(){
        this.renderMarker();
    }
  },
  methods: {
    getMarkers: function (){
        axios.get('http://127.0.0.1:8000/marker').then(response => {
                    this.markers = response.data;
                    console.log(this.markers);
            }).catch(error =>( console.log(error) ));

        console.log(this.markers);
    },
    renderMarker: function(){
      for ( i = 0; i < this.markers.length; i++){
        console.log(this.markers[i]);
        var marker = new L.Marker([this.markers[i].latitude, this.markers[i].longitude], this.markerOption);
        marker.addTo(this.map);
        marker.bindPopup(`
            <h6 class="display-6">${this.markers[i].derivation_code}</h6>
            <img src="storage/images/${this.markers[i].image}" style="height:100%;width:100%">
        `);
      }
    },
    markerClicked: function(mrkr_data){
      this.selectedSample = mrkr_data.derivation_code;
      console.log(this.selectedSample);
    }
  },
});