javascript - 安装vuejs后在数据对象中设置地理位置

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 inside navigator 绑定(bind)到错误的上下文，所以当你写 this.position 时，this 没有设置为 Vue 对象。

为了防止你可以使用箭头函数:

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

或者在导航器对象之前声明变量以保持正确的上下文

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

顺便说一下，position.coords 会返回包含 latitude、longitude 等属性的对象，所以如果您想要其中之一，您需要指出:

self.position = position.coords.latitude;