javascript - VueJS Google 放置自动完成功能

Question

大家好，我在实现谷歌自动完成功能时遇到错误。所以这是场景 在蓝色上它工作正常，但是当我将其替换为红色时它不起作用 现在，当我将其放在红色箭头所指的线上时，出现此错误

仅供引用，我使用这个: https://www.npmjs.com/package/vue-google-autocomplete我也尝试过这个 https://medium.com/dailyjs/google-places-autocomplete-in-vue-js-350aa934b18d

它工作正常，但当我把它放在循环上时，它不起作用。它似乎安装状态出现错误。这是我的 Mount() 代码

//this is the current I used
this.$refs.address.focus();
//this is for the 2nd one
/*this.autocomplete = new google.maps.places.Autocomplete(
      (this.$refs.autocomplete),
      {types: ['geocode']}
    );
    this.autocomplete.addListener('place_changed', () => {
      let place = this.autocomplete.getPlace();
      let ac = place.address_components;
      let lat = place.geometry.location.lat();
      let lon = place.geometry.location.lng();
      let city = ac[0]["short_name"];

      console.log(`The user picked ${city} with the coordinates ${lat}, ${lon}`);
    });*/

Answer 1

将 mounted 中的行替换为:

if(this.$refs.address) this.$refs.address.focus();

因为自动完成组件放置在 v-for 内部，所以当 WorkHistory.vue 组件挂载时，它不知道 this.$refs 是什么.address 是，除非 work_history_data 至少有 1 项。