Question

我对VueJS场景比较陌生。最近我正在尝试处理我的方面项目，该项目需要在主要组件安装后立即获取用户的地理位置数据。

我的代码在这里，

var app = new Vue({
  el: '#app', 
  data: {
    position: null
  },
  mounted: function() {
    if(navigator.geolocation){
       navigator.geolocation.getCurrentPosition(function(position){
        this.position = position.coords;
      })
    }

  }
});

我希望在挂载后将数据对象中的position设置为当前的地理位置，但遗憾的是它无效。有什么我想念的吗？

Answer 1

它的上下文问题，这个内部导航器受限于错误的上下文，因此当您编写this.position时，this未设置为Vue对象。

为了防止您使用箭头功能：

  mounted: function() {
    if(navigator.geolocation){
       navigator.geolocation.getCurrentPosition(position => {
        this.position = position.coords;
      })
    }
  }

或在保存正确上下文的导航器对象之前对变量进行declate

  mounted: function() {
    if(navigator.geolocation) {
       var self = this;
       navigator.geolocation.getCurrentPosition(function(position){
        self.position = position.coords;
      })
    }
  }

BTW只是让你知道 - position.coords会返回包含latitude，longitude等属性的对象，所以如果你想要其中一个，你需要指出：< / p>

self.position = position.coords.latitude;

在挂载的vuejs之后在数据对象中设置地理位置

1 个答案: