I'm currently working on integrating Google Places Autocomplete with Vue.js.
According to the API documentation, the Autocomplete class requires an inputField:HTMLInputElement as its first parameter, like shown in their example:
autocomplete = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
{types: ['geocode']});
However, due to the limitations of passing elements by their ID in Vue.js, how can this be accomplished and what type of construct should we pass?
For example, the following code snippet encounters an issue:
<template>
<input id="autocomplete" placeholder="Enter your address" type="text"></input>
</template>
<script>
export default {
created() {
var autocomplete = new google.maps.places.Autocomplete(
/** @type {!HTMLInputElement} */(document.getElementById('autocomplete')),
{types: ['geocode']});
}
}
</script>
resulting in the error message:
InvalidValueError: not an instance of HTMLInputElement