<template>
<b-form-textarea
:id="id"
ref="autocomplete"
v-model="autocompleteText"
rows="3"
max-rows="6"
type="text"
:class="classname"
:placeholder="placeholder"
@focus="onFocus()"
@blur="onBlur()"
@change="onChange"
@keypress="onKeyPress"
@keyup="onKeyUp"
/>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
@Component({
name: 'AddressInput'
})
export default class extends Vue {
@Watch('autocompleteText')
private autocompleteTextChange(newVal:any, oldVal:any) {
this.$emit('inputChange', { newVal, oldVal }, this.id);
}
@Watch('country')
private countryChange(newVal:any, oldVal:any) {
this.autocomplete.setComponentRestrictions({
country: this.country === null ? [] : this.country
});
}
mounted() {
const options:any = {};
if (this.types) {
options.types = [this.types];
}
if (this.country) {
options.componentRestrictions = {
country: this.country
};
}
this.autocomplete = new window.google.maps.places.Autocomplete(
document.getElementById(this.id),
options
);
this.autocomplete.addListener('place_changed', this.onPlaceChanged);
}
private onPlaceChanged() {
let place = this.autocomplete.getPlace();
if (!place.geometry) {
this.$emit('no-results-found', place, this.id);
return;
}
if (place.address_components !== undefined) {
this.$emit('placechanged', this.formatResult(place), place, this.id);
this.autocompleteText = (document.getElementById(this.id) as HTMLInputElement).value;
this.onChange()
}
}
}
</script>
I am currently working on a Google Place Autocomplete component using Vue.js, TypeScript, and vue-property-decorator. The autocomplete place suggestions are appearing correctly. However, I am encountering an error message "InvalidValueError: not an instance of HTMLInputElement". I have attempted using $refs but the same error persists.
If you have any questions or need clarification, feel free to ask.
Any insights on what might be causing this issue would be greatly appreciated. Thank you in advance.