我无法从我的 vue.js 组件中的方法访问数据值？

Question

我无法在maps() 方法中从data() 访问值lat , lng。

我的 vue.js 组件 代码链接：https://gist.github.com/melvin2016/c8082e27b9c50964dcc742ecff853080

lat,lng 的控制台图像 enter image description here

<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 内容，因为您将在循环的稍后时间调用它哪一点都将被渲染。