Google Places Autocomplete using Q-Input not working but works with Input



  • 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:

    chrome_15qIkyBFYf.png

    chrome_jAeEhXBlY1.png



  • @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.



  • 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!



  • @avistad

    here’s an article about quasar and google places api:
    https://nsrtechx.com/quasar-google-maps-with-places/



  • @dobbel Thanks!



  • @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?



  • 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:

    chrome_6d5rgPfkfT.png


Log in to reply