@Ilia please pm me the link on HN next time you post. I would be happy to upvote! Same if you launch on Product Hunt

This is solved now. Thanks to @metalsadman !

---- solution ----
I modified q-input thus:

    <q-input type="text" placeholder="Enter your address" id="Qautocomplete" ref="Qautocomplete" @keypress="autocompleteLocation" />

and under scripts:

    autocompleteLocation () {
      const input = document.getElementById(this.$refs.Qautocomplete.$refs.input.id) as HTMLInputElement;
      const autocomplete = new google.maps.places.Autocomplete(input);
    },

How the Q-Input element works now:

@tof06 This solution helped me too… Thank you!

@pmooredesigner Thanks for this answer. I had a similar predicament myself

@Ilia please pm me the link on HN next time you post. I would be happy to upvote! Same if you launch on Product Hunt

Did you post this on Hacker News?

Wow! Was this written fully in Quasar?

This is solved now. Thanks to @metalsadman !

---- solution ----
I modified q-input thus:

    <q-input type="text" placeholder="Enter your address" id="Qautocomplete" ref="Qautocomplete" @keypress="autocompleteLocation" />

and under scripts:

    autocompleteLocation () {
      const input = document.getElementById(this.$refs.Qautocomplete.$refs.input.id) as HTMLInputElement;
      const autocomplete = new google.maps.places.Autocomplete(input);
    },

How the Q-Input element works now:

@metalsadman said in Google Places Autocomplete using Q-Input not working but works with Input:

@avistad try using a ref instead of Id on your qinput, and refer to the wrapped inner input. Ie. this.$refs.myQinput.$refs.input or this.$refs.myQinput.$el.$refs.input, can’t test atm, but something along those lines, or just simply console.log your qinput’s refs and check the object to see the ref of the wrapped native html input in the node.

Hey metalsadman - Your solution worked !!! Thanks a lot ! Use of $ref was new to me. I have edited the post to show the solution I implemented. But how did you know that ref would work?

@dobbel Thanks!

Thanks @metalsadman . I feel a bit embarrassed to say this but I didnt fully grasp the solution you suggested. I am actually new to both VueJS and Quasar.
So what I understood is I should try to console.log(this.$refs.myQinput.$refs) and then find which object is referenced and use “ref” to point to that?
(I dont know what “ref” is but I will read up about it)
Thanks a lot again!

I am trying to use the Google Places Autocomplete API. I cannot get q-input to do the autocomplete. But if I use input it works. The screenshots clearly the outcomes on the two elements.
How can I make q-input work like input without installing anything new?

The code used is:

    <input type="text" placeholder="Enter your address" id="autocomplete" />
    <q-input type="text" placeholder="Enter your address" id="autocomplete" />

  mounted () {
    const input = document.getElementById("autocomplete") as HTMLInputElement;
    const autocomplete = new google.maps.places.Autocomplete(input);
  },

And in index.template.html

    <script defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDp6_pFytAjg4BA83uaNTqhBs6LSHpu488&libraries=places&callback=initMap">
    </script>

Screenshots 1 and 2: