Vue not updating field after fill model google api autocomplete

Viewed 33

Please help me with update field in Vue. I try to use https://www.npmjs.com/package/vue-google-autocomplete This is simple form

enter image description here

After selecting the address, I want to fill in not with the full address from Google, but with a part of it (for example, address line 1). Now it fills in "227 West Monroe Street, Chicago, IL, USA" instead of "West Monroe Street".

I use focus and blur:

async mounted() {
  if (this.$refs.address) {
    this.$refs.address.focus();
    this.$refs.address.blur();
  }
},

and methods:

methods: {
  onBlur() {
    this.focused = false
    setTimeout(() => {
      const addressInput = document.getElementById(`address-input`);
      if (!addressInput.value) {
        addressInput.value = this.user.value.Address1; //HERE BUG?
      }
    }, 0);
  },
  onChange({ newVal }) {
    Address1: params.Address1 || '',
    Address2: params.Address2 || '',
    City: params.City || '',
    StateCode:params.StateCode || '',
    ZipCode: params.ZipCode || '',
    Country: params.Country || 'US',
  },
  getAddress(addressData) {
    this.user.Address1 = addressData.route;
    this.user.Address2 = addressData.street_number;
    this.user.City = addressData.locality;
    this.user.Country = addressData.country;
    this.user.ZipCode = addressData.postal_code;
    this.user.StateCode = addressData.administrative_area_level_1
  }
}

and template

<div class="p2">
  <google-autocomplete
    id="address-input"
    country="US"
    v-model="user.Address1"
    :classname="googleAutocompleteClass"
    placeholder="Enter address line 1"
    @onblur="onBlur"
    @inputChange="onChange"
    @placechanged="getAddress" />
</div>

but this setTimeout does not work

0 Answers
Related