Vuetifyочищает ввод после нажатия на результат автозаполнения 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 предназначено для более широкого использования 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
  });