Vue - 无法将 HTML 地理位置绑定到组件变量

Question

我遇到了一个奇怪的问题，当我得到 HTML 地理定位调用的结果时，我无法将它绑定到 Vue 数据，但我可以 console.log 成功。

Vue 方法：

initGeolocation: function() {
            if( navigator.geolocation )
            {
               // Call getCurrentPosition with success and failure callbacks
               navigator.geolocation.getCurrentPosition( success, fail );
            }
            else
            {
               return;
            }

            function success(position)
           {
               console.log(position.coords.latitude); //works
               this.lat = position.coords.latitude; //does not work
           }

           function fail()
           {
              console.log('fail')
           }
        },

  mounted() {
     this.lat = this.initGeolocation(); // does not work
     console.log(this.initGeolocation()) // returns undefined
    },

数据：

        lat: '',
        long: '',

非常感谢任何帮助。

Answer 1

在您的 mounted 中，您使用 initGeolocation() 方法的 return 分配 this.lat。但是，如果成功，此方法不会 return 任何数据。相反，您将结果写入 this.lat ，然后将被您的方法的无效结果再次覆盖。因此，请确保您的方法 initGeolocation return 是您的地理位置数据，或者您更改挂载方法以调用该方法而不将 return 值分配给 this.lat.

另外，您似乎刚刚将 initGeolocation 方法添加到您的组件中。查看它所属的 vue 组件的 methods 属性。

所以试试这个：

mounted() {
  this.initGeolocation(); 
  console.log(this.initGeolocation());
},

methods: {
  initGeolocation: function() {
    if( navigator.geolocation)
    {
        // Call getCurrentPosition with success and failure callbacks
        navigator.geolocation.getCurrentPosition( success, fail );
    }
    else
    {
        return;
    }

    function success(position)
    {
        this.lat = position.coords.latitude; //does not work
    }

    function fail()
    {
      console.log('fail')
    }
  }
}

Answer 2

单词this指的是函数的作用域。当您在其中嵌套另一个函数时，this 一词现在指的是新的/更小的作用域，因此不再定义 this.lat。所以我们在 vm 中捕获输出 this 并在函数内部使用它。

methods: {

  initGeolocation: function() {
    var vm = this;
    if( navigator.geolocation)
    {
        // Call getCurrentPosition with success and failure callbacks
        navigator.geolocation.getCurrentPosition( success, fail );
    }
    else
    {
        return;
    }

    function success(position)
    {
        vm.lat = position.coords.latitude; //should work now!!
    }

    function fail()
    {
      console.log('fail')
    }
  }
},
mounted() {
   this.initGeolocation();
},

Vue - 无法将 HTML 地理位置绑定到组件变量

Vue - Cannot bind HTML Geo-location to component variable

html

javascript

geolocation

vue.js