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 maps自动完成功能应以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
  });

在点击Google Maps自动填充的结果后，Vuetify <v-text-field>清除输入

1 个答案: