Vue Js Google 使用 typescript 和 vue-property-decorator 放置自动完成

Question

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

我正在尝试使用 Vuejs & typescript & vue-property-decorator 创建一个 google place 自动完成组件。自动完成地点建议即将推出。但我收到一个错误“InvalidValueError：不是 HTMLInputElement 的实例”。我也尝试了 $refs 但同样的错误即将到来。

如果您有任何疑问，请询问我，我会尽力解释。

我错过了什么？提前致谢。

Answer 1

错误提示“不是 HTMLInputElement 的实例”。

使用输入元素代替 textarea 元素

<input type="text />