CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3vue.jsgoogle-places-autocomplete
Jonas
Jonas

Reputation: 105

VueJS Google places autocomplete

Hi guys Im having an error implementing the google autocomplete. So here's the scenario On the blue its working fine but when I replace it to the red its not working On the blue its working fine but when I replace it to the red its not working result Now when I put it on the line where the red arrow points I got this error enter image description here

For reference Im using this: https://www.npmjs.com/package/vue-google-autocomplete I also tried this one https://medium.com/dailyjs/google-places-autocomplete-in-vue-js-350aa934b18d

Its working fine but when I put it on the loop its not working. It seems the mounted state got an error. Here's the code of my mounted()

//this is the current I used
this.$refs.address.focus();
//this is for the 2nd one
/*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}`);
    });*/

Upvotes: 0

Views: 5107

Answers (1)

Monkey D Naruto
Monkey D Naruto

Reputation: 176

Replace the line inside your mounted with this:

if(this.$refs.address) this.$refs.address.focus();

Because the autocomplete component is placed inside v-for so when the WorkHistory.vue component is mounted, it doesn't know what this.$refs.address is, unless work_history_data has at least 1 item.

Upvotes: 1

Related Questions