我無法從vue.js組件中的方法訪問數據值？

Question

我無法從maps()方法中的data()訪問值lat , lng 。

我的vue.js組件代碼鏈接： https : //gist.github.com/melvin2016/c8082e27b9c50964dcc742ecff853080

lat,lng控制台圖像在此處輸入圖像描述

<script>
import Vue from 'vue';
import navbarSec from './navbarSec.vue';
export default {
  data(){
    return{
      lat: '',
      lng: '',
      mapState: window.mapState,
      from:'',
      to:'',
      placesFrom:[],
      placesTo:[]
    };
  },
  components:{
    'navbar':navbarSec
  },
  created(){
    var token = this.$auth.getToken();
    this.$http.post('http://localhost:3000/book',{},{headers: {'auth':token}}).then(function(data){
      this.session = true;
    })
    .catch(function(data){
      this.session = false;
      this.$auth.destroyToken();
      Materialize.toast(data.body.message, 6000,'rounded');
      this.$router.push('/login');
    });
    if(navigator.geolocation){
      navigator.geolocation.getCurrentPosition((data)=>{
        this.lat = data.coords.latitude;
        this.lng = data.coords.longitude;
        this.from=data.coords.latitude+' , '+data.coords.longitude;
      });
    }else{
      Materialize.toast("Cannot Get Your Current Location !", 6000,'rounded');
    }
  },
  mounted(){
    if (this.mapState.initMap) {// map is already ready
      var val = this.mapState.initMap;
      console.log(val);
      this.maps();
    }
  },
  watch: {
    // we watch the state for changes in case the map was not ready when this
    // component is first rendered
    // the watch will trigger when `initMap` will turn from `false` to `true`
    'mapState.initMap'(value){
      if(value){
        this.maps();
      }
    },
    from : function(val){
      if(val){
        var autoComplete = new google.maps.places.AutocompleteService();
        autoComplete.getPlacePredictions({input:this.from},data=>{
          this.placesFrom=data;
        });
      }
    },
    to:function(val){
      if(val){
        var autoComplete = new google.maps.places.AutocompleteService();
        autoComplete.getPlacePredictions({input:this.to},data=>{
          this.placesTo=data;
        });
      }
    }
  },
  methods:{
    maps(){
      var vm = this;
      var lati = vm.lat;
      var lngi = vm.lng;
      console.log(lati+' '+lngi);
      var map;
      var latlng = {lat: lati, lng:lngi };
      console.log(latlng);
        this.$nextTick(function(){
          console.log('tickkkk');
           map = new google.maps.Map(document.getElementById('maplo'), {
            zoom: 15,
            center: latlng
          });
          var marker = new google.maps.Marker({
            position: latlng,
            map: map
          });
        });
    }
  }
}
</script>

Answer 1

之所以發生這種情況，是因為您正在掛載的位置調用maps() ，但navigator.geolocation.getCurrentPosition((data) => {})代碼尚未解析。 考慮到這一點，請在getCurrentPosition方法中調用this.maps() ，即：

navigator.geolocation.getCurrentPosition((data)=>{
    this.lat = data.coords.latitude;
    this.lng = data.coords.longitude;
    this.from=data.coords.latitude+' , '+data.coords.longitude;
    this.maps()
});

我沒有詳細介紹，但是您可以在執行此操作時更改maps()方法中的位以刪除nextTick內容，因為您將在該循環的稍后部分進行調用被渲染。