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