Vuejs Google place使用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: not a instance of HTMLInputElement“。我也尝试过$refs，但同样的错误又来了。

如果你有任何疑问，请告诉我，我会尽力解释的。

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

​

​

​

​

Answer 1

错误提示"not a instance of HTMLInputElement“。

使用input元素而不是textarea元素

<input type="text />