Here is the solution that worked for me without any package.
it might help some one.
<template>
<q-input
ref=“autocomplete”
filled
v-model=“user.address”
label=“Physical Address”
for=“address” //id attribute
hint=“Your permanent address”
:rules="[val => !!val || ‘This field is required.’]"
/>
</template>

and in mounted
<script>
mounted() {
this.autocomplete = new google.maps.places.Autocomplete(
// (this.$refs.autocomplete),
(document.getElementById(“address”)),
{types: [‘geocode’]}
);
this.autocomplete.addListener(‘place_changed’, () => {
let place = this.autocomplete.getPlace();
let ac = place.address_components;
console.log(ac);
}
});
<script>

I remove the the vue-google-autocomplete package.

Import
<script src=“https://maps.googleapis.com/maps/api/js?key=APIKEY&libraries=places”></script>

I find out that i was giving reference instead of id, I guess google map api only work with id attribute.

Here is the solution that worked for me. it might help some one.
<q-input
ref=“autocomplete”
filled
v-model=“user.address”
label=“Physical Address”
for=“address” //id attribute
hint=“Your permanent address”
:rules="[val => !!val || ‘This field is required.’]"
/>

and in mounted

mounted() {
this.autocomplete = new google.maps.places.Autocomplete(
// (this.$refs.autocomplete),
(document.getElementById(“address”)),
{types: [‘geocode’]}
);
this.autocomplete.addListener(‘place_changed’, () => {
let place = this.autocomplete.getPlace();
let ac = place.address_components;
console.log(ac);
}
});

Also Thanks for your time @dobbel

Here is the solution that worked for me without any package.
it might help some one.
<template>
<q-input
ref=“autocomplete”
filled
v-model=“user.address”
label=“Physical Address”
for=“address” //id attribute
hint=“Your permanent address”
:rules="[val => !!val || ‘This field is required.’]"
/>
</template>

and in mounted
<script>
mounted() {
this.autocomplete = new google.maps.places.Autocomplete(
// (this.$refs.autocomplete),
(document.getElementById(“address”)),
{types: [‘geocode’]}
);
this.autocomplete.addListener(‘place_changed’, () => {
let place = this.autocomplete.getPlace();
let ac = place.address_components;
console.log(ac);
}
});
<script>

I remove the the vue-google-autocomplete package.

Import
<script src=“https://maps.googleapis.com/maps/api/js?key=APIKEY&libraries=places”></script>

I find out that i was giving reference instead of id, I guess google map api only work with id attribute.

Here is the solution that worked for me. it might help some one.
<q-input
ref=“autocomplete”
filled
v-model=“user.address”
label=“Physical Address”
for=“address” //id attribute
hint=“Your permanent address”
:rules="[val => !!val || ‘This field is required.’]"
/>

and in mounted

mounted() {
this.autocomplete = new google.maps.places.Autocomplete(
// (this.$refs.autocomplete),
(document.getElementById(“address”)),
{types: [‘geocode’]}
);
this.autocomplete.addListener(‘place_changed’, () => {
let place = this.autocomplete.getPlace();
let ac = place.address_components;
console.log(ac);
}
});

Also Thanks for your time @dobbel

@Mauri what solution did work for you

Thanks @dobbel
I’ve installed the package using npm install vue-google-places --save.

got this error

***Failed to compile.

./node_modules/vue-google-places/dist/vue-google-places.esm.js
Module not found: Error: Can’t resolve ‘vuetify/lib’ in ‘C:\xampp5\htdocs\fifit\fifit-app-front\node_modules\vue-google-places\dist’***

i tried to install npm install vuetify/lib --save getting this

npm ERR! enoent This is related to npm not being able to find a file.

@dobbel I don’t want what this " https://github.com/PDERAS/vue2-geocoder " plugin does.

What i want is [ Google Place autocomplete address ] without map,
There is one text field for address & when any user types any letters or words it will show address result based on matched words & split that address into country/street/city/postal code.

FOR Example:- if user search for 41 Bennett Way
it must show similar address list here is 1 example 41 Bennett Way, Upper Coomera QLD 4209, Australia

If there is any other plugin or way to get the above result.
i’m happy to do the changes

for reference please check image here

https://storage.googleapis.com/support-forums-api/attachment/thread-35720319-4559659613673407766.png

@dobbel thanks for making the points, what i want is when any one search any address, he/she will see the list of addresses & will select one of them.
I need from that selected address is street, state, country, city, postal code.

I will try with this " https://github.com/PDERAS/vue2-geocoder " & will make a comment here.

Thanks

@dobbel
Is there any way that i can use to display available address when user search for an address.
Can you please suggest & guide?

For eg. as image in the the below link

https://support.google.com/maps/thread/35720319?hl=en

Hi everyone,

I’m using VueGmaps package which i installed it using
npm install vue-gmaps --save

<script>
      import Vue from "vue";
      import VueGmaps from 'vue-gmaps'
      
  mounted() {
this.autocomplete = new google.maps.places.Autocomplete(
  (this.$refs.autocomplete),
  { 
    type: ['geocode'],
    componentRestrictions: { country: 'NZ' }
  }
)
           this.autocomplete.addListener('changed_place',()=>{
    let place = this.autocomplete.getPlace()
    let ac = place.address_components
    let city = ac
    this.city = city
    this.cities.push(ac[0]['short_name'].concat(', ',ac[2]['short_name']))

    console.log(this.city);
   })
 },
         </script>

         <teamplate>
           <q-input              
                      ref="autocomplete"              
                      v-model="user.address"              
                      filled              
                      label="Physical Address"              
                      hint="Your permanent address"              
                      :rules="[val => !!val || 'This field is required.']"              
                    />       </template>

I’m getting error google is not defined in console. please check screenshot below

I want this to give suggestion of addresses when anyone types anything without map.

can anyone help me with this?

Thanks

Template code:
<template>
<q-select
filled
label=“Select Tags”
v-model=“selectedTags”
multiple
:options=“tagsList”
emit-value
map-options
@change=“filterTips”
style=“width: 250px”
/>
</template>

& my computed property

 tagsList() {
 //this.tags is getting data from getter.js
  let result = [];      
  this.tags.forEach(tag=>{
    result.push({ label: tag.name, value: tag.tags_id });
  });
  //  result = list.map(tag => ({ label: tag.name, value: tag.tags_id }));
  console.log(result);
  return result;
},

& console.log(result) is giving me this

(3) [{…}, {…}, {…}]
0: {label: "First ", value: “1”}
1: {label: “Second”, value: “2”}
2: {label: “Third”, value: “3”}
length: 3
proto: Array(0)

can anyone help me with this
Thanks