无法使用 v-model 捕获与输入值相同的完整地址 - Vue/Vuetify

问题描述

我无法从使用 Vuetify 通过谷歌自动完成 API 填充的输入标签中捕获完整地址，并且填充的地址与 formatted_address 不同。

例如，如果我在输入标签中输入地址 Statue of Liberty National Monument,New York,NY,USA，google formatted_address 将作为与输入不匹配的 New York,NY 10004,USA 出现。所以我尝试使用 v-model 绑定来获取输入值。但是，它没有提供完整地址，而是返回此 statue

这是代码片段：

 <v-text-field ref="autocomplete" v-model="address" id="autocomplete-address" autocomplete="off" solo outlined flat hide-details="auto" class="solo-cust mb-2"></v-text-field>

和JS代码：

const App = {
  template: "#app-template",data: () => ({
    autocomplete: null,address: null,fullAddress: null
  }),mounted() {
    this.init();
  },methods: {
    async init() {
      const element = document.getElementById("autocomplete-address");
      this.autocomplete = new google.maps.places.Autocomplete(element);
      this.autocomplete.addListener("place_changed",this.update);
    },async update() {
      const place = this.autocomplete.getPlace();
      const address = place.address_components;
      this.fullAddress = place.formatted_address;
      this.form.latitude = place.geometry.location.lat();
      this.form.longitude = place.geometry.location.lng();
    }
  }
};

new Vue({
  vuetify: new Vuetify(),render: (h) => h(App)
}).$mount("#app");

谁能建议我如何捕获与输入值相同的完整地址，即 Statue of Liberty National Monument,USA？

Please check this working code pen here

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）