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

Question

I get information about location, but can not use it in html.error => Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'geoLocationPlace').Why is the variable(geoLocationPlace)undefined?

 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)
                    })
                    
                })

change `function(position)` to `(position) =>` to preserve `this` correctly — Bravo, May 10 '22 at 10:47

score 0 · Accepted Answer · answered May 10 '22 at 10:50

The issue is that this is "lost" because you use a regular function as the callback to navigator.geolocation.getCurrentPosition

You clearly understand the need for arrow functions, as your fetch chain uses them, so I can only conclude that you simply missed this function

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

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

1 Answers1