Hey everyone, I'm encountering an issue while trying to implement the Google Autocomplete feature. Here's what's happening https://i.sstatic.net/CZsED.png It works fine with the blue version, but when I switch to the red one, it stops working https://i.sstatic.net/e3KrE.png Now, when I place it on the line indicated by the red arrow, I get this error https://i.sstatic.net/jIsB0.png
For guidance, I am using this package: https://www.npmjs.com/package/vue-google-autocomplete I also tested out this resource https://medium.com/dailyjs/google-places-autocomplete-in-vue-js-350aa934b18d
Everything functions correctly until I try implementing it within a loop. It appears that the mounted state is causing an error. Below is the code for my mounted() method:
//this is the current approach I used
this.$refs.address.focus();
//this is for the second option
/*this.autocomplete = new google.maps.places.Autocomplete(
(this.$refs.autocomplete),
{types: ['geocode']}
);
this.autocomplete.addListener('place_changed', () => {
let place = this.autocomplete.getPlace();
let ac = place.address_components;
let lat = place.geometry.location.lat();
let lon = place.geometry.location.lng();
let city = ac[0]["short_name"];
console.log(`The user picked ${city} with the coordinates ${lat}, ${lon}`);
});*/