i can't access data values from methods in my vue.js component?

Question

I can't access the values lat , lng from data() in maps() method.

my vue.js component code link : https://gist.github.com/melvin2016/c8082e27b9c50964dcc742ecff853080

console image of 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

This is happening because you're calling maps() in the mounted at which point, the navigator.geolocation.getCurrentPosition((data) => {}) code hasn't resolved. With that in mind, call this.maps() within the getCurrentPosition method ie:

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

I've not looked in detail but you might be able to change the bits within the maps() method to remove the nextTick stuff when you do this as you'll be calling it a lot later in the cycle at which point everything will have been rendered.