Vuetify <v-text-field> 單擊Google Maps自動完成的結果后清除輸入

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

我認為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
  });