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

【问题标题】：set geolocation in data object after mounted vuejs安装 vuejs 后在数据对象中设置地理位置
【发布时间】：2017-08-22 16:07:28
【问题描述】：

我对 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 设置为当前地理位置，但不幸的是它不起作用。我有什么遗漏吗？

【问题讨论】：

你能在 getCurrentPosition 中记录错误回调吗？基本上它只能在安全源上工作 - 如果你在 localhost 上工作它应该可以工作，但如果你是任何不使用 https 的站点，它会抛出可能被错误回调捕获的错误，

标签： javascript geolocation vue.js

【解决方案1】：

这是上下文问题，this inside navigator 绑定到错误的上下文，所以当你写this.position 时，this 没有设置为 Vue 对象。

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

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

或在 navigator 对象之前声明变量，该变量将保持正确的上下文

  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;

【讨论】：