google maps click event isn't reading objects from data - google-maps

Question

I'm trying to get latitude and longitude by clicking on map then I use them to get formatted address from google maps API and finally I want to persist lat, lng and formatted address in my object "station" declared in data
data() {
return {
station: {},
mapName: this.name + "-map",
lat: Number,
lng: Number,
Fulladdress: String
};
} ,
mounted() {
const element = document.getElementById(this.mapName);
const options = {
zoom: 14,
center: new google.maps.LatLng(51.501527, -0.1921837)
};
const map = new google.maps.Map(element, options);
google.maps.event.addListener(map, "click", function(event) {
this.lat = event.latLng.lat();
this.lng = event.latLng.lng();
axios
.get(
"https://maps.googleapis.com/maps/api/geocode/json?latlng=" +
this.lat +
"," +
this.lng +
"&key=APIKEY"
)
.then(resp => {
var fulladdress;
console.log(resp.data.results[0].formatted_address);
fulladdress = resp.data.results[0].formatted_address;
this.Fulladdress = fulladdress;
//persist lat, lng and formatted address in my object station
this.station.address = this.Fulladdress;
this.station.lat = this.lat;
this.station.lng = this.lng;
})
.catch(e => {
console.log(e);
});
});
}

Answer 1

The context is changing. Inside the click handler, the this is not referring to the Vue instance, but something else (it depends on how google maps does it, but it could be window or the map instance).
To have the this be the Vue instance, use arrow functions instead.
Change from:
google.maps.event.addListener(map, "click", function(event) {
To:
google.maps.event.addListener(map, "click", (event) => {