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

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图片：禁用javascript模糊事件

Answer 1

我认为谷歌地图自动完成应该以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
});