私のvue.jsコンポーネントのメソッドからデータ値にアクセスできませんか？

Question

はdata()からmaps()の方法でアクセスできません。

私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() 
}); 

私は詳細に見ていませんでしたが、あなたは、あなたがこれを行うときnextTickものを削除するためにmaps()メソッド内のビットを変更することができるかもしれませんサイクルの後半でそれを多く呼び出すことになり、その時点ですべてがレンダリングされます。