I am currently integrating the Google Places API into my project and have encountered an interesting challenge. I need to implement multiple delivery addresses, requiring me to modify how the Google Places API functions.
Below is my existing code snippet:
<template>
<div>
<div v-for="(search, index) in searchInput" :key="index">
<input type="text" ref="search" v-model="search.city">
</div>
<button type="button" @click="addMore">Add more</button>
</div>
</template>
<script>
export default {
name: "App",
data: () => ({
location: null,
searchInput: [
{
city: ""
}
]
}),
mounted() {
window.checkAndAttachMapScript(this.initLocationSearch);
},
methods: {
initLocationSearch() {
let autocomplete = new window.google.maps.places.Autocomplete(
this.$refs.search
);
autocomplete.addListener("place_changed", function() {
let place = autocomplete.getPlace();
if (place && place.address_components) {
console.log(place.address_components);
}
});
},
addMore() {
this.searchInput.push({ city: "" });
}
}
};
</script>
Encountering an error from the API with message:
InvalidValueError: not an instance of HTMLInputElementb.ownerDocument is undefined
I am seeking guidance on how to create unique references for each added item and pass them to the initLocationSearch method. Any insights or suggestions would be greatly appreciated.
View a demo on Codesandbox