为什么我不能在 html...vue js 中使用变量

Question

我获得了有关位置的信息，但无法在 html.error => 未捕获（承诺）TypeError 中使用它：无法设置未定义的属性（设置 'geoLocationPlace'）。为什么变量（geoLocationPlace）未定义？

 data() {
        return {
            inputValue:null,
            searchedPlace:null,
            geoLocationPlace:null,
        }
    },

          getLocation(){
            if(navigator.geolocation){
                navigator.geolocation.getCurrentPosition(function(position){
                    let long = position.coords.longitude;
                    let lat = position.coords.latitude;
                    
                    fetch(`https://api.bigdatacloud.net/data/reverse-geocode-client? 
                               latitude=${lat}&longitude=${long}&localityLanguage=en`)
                    .then(res => {
                        return res.json()
                    })
                    .then(resData => {
                        //resData.countryName return country
                        this.geoLocationPlace = resData.countryName
                        console.log(this.geoLocationPlace)
                    })
                    
                })

Answer 1

问题是 this“丢失”了，因为您使用常规函数作为 navigator.geolocation.getCurrentPosition

的回调

您清楚地了解箭头函数的必要性，因为您的 fetch 链使用了它们，所以我只能得出结论，您只是错过了这个函数

getLocation(){
  if(navigator.geolocation){
    // fix the next line like so
    navigator.geolocation.getCurrentPosition((position) => {
      let long = position.coords.longitude;

为什么我不能在 html...vue js 中使用变量

Why can't I use a variable in html... vue js

html

javascript

vue.js