Vuetify <v-text-field> 在点击来自 Google 地图自动完成的结果后清除输入

Question

我有一个包含 <v-text-field> 的页面，并且我已经为其添加了 GoogleMaps 自动完成支持。但是，似乎 Vuetify 在用户选择地址后清除了输入。

我发现问题与输入的 blur 事件有关。

关于如何解决这个问题并允许地址保留在输入中的任何想法？

他是 Codepen 上问题的一个工作示例：https://codepen.io/jfmachado01/full/YRMpVL/

<v-text-field
  id="autocomplete"
  prepend-icon="place"
  placeholder="Address"
>

这是问题的 GIF： Disabling the javascript blur event

Answer 1

我认为 google 地图自动完成应该更多地以 jquery 的方式使用，但是如果你想在 Vue 中使用它，你必须使用 v-model 和一个地址变量，使值不消失：

<v-text-field
  v-model="address" // this will sync the address value in data and the component
  id="autocomplete"
  prepend-icon="place"
  placeholder="Address"
>

然后在你的代码的脚本部分：

new Vue({
  store,
  el: '#app',
  data () {
    return {
      address: '', // add this data variable
      states: [],
      autocomplete: null,
    }
  },

  // inside the mounted hook:
  this.autocomplete.addListener("place_changed", () => {
    var place = self.autocomplete.getPlace();
    this.address = place.name; // update the value
  });

Vuetify <v-text-field> 在点击来自 Google 地图自动完成的结果后清除输入

Vuetify <v-text-field> clears input after clicking on result from Google Maps autocomplete

javascript

google-maps

vue.js

google-places-api

vuetify.js