VueJS InvalidValueError：不是HTMLInputElement的实例

Question

我有一个屏幕，显示列表中每个元素的输入字段。

<div v-for="(destiny, index) in destinations" :key="index">
  <md-field>
    <md-input
      :id="destiny.id"
      v-model="destiny.name"
      type="text"
      required
      @focus="destinyOnFocus(index)"
    ></md-input>
  </md-field>
</div>

此屏幕上有一个按钮，单击该按钮可将元素添加到列表中。当列表增加时，VueJS会呈现一个新的输入类型字段。 当用户单击输入字段时，将调用destinyOnFocus函数。

destinyOnFocus(index) {
  this.destinationsAutocomplete[index] = new window.google.maps.places.Autocomplete(document.getElementById(this.destinations[index].id));
  this.destinationsAutocomplete[index].addListener("place_changed", () => {
    this.calculateRoutes();
  });
}

调用destinyOnFocus时，将创建一个google maps自动完成对象，并将一个侦听器与之关联。 当用户选择位置时，将调用calculateRoutes例程。 到现在为止，一切都在顺利进行。 当我尝试使用以前保存的列表加载此屏幕时，就会发生问题。 我将路由加载到目的地，并手动调用destinyOnFocus（index）函数来创建Autocomplete对象并关联侦听器。 但是这里出现了问题，该元素尚未在屏幕上呈现，并且我无法创建自动完成对象。 返回以下错误：InvalidValueError：不是HTMLInputElement的实例