Utilizing Google Maps Places for autocompletion of my input, I am aiming to nudge the user towards selecting an address from the provided dropdowns in order to work with the chosen place.
A challenge arises when considering enabling users to input addresses that may not be recognized by Google. Therefore, upon blur, an alert is meant to prompt the user to confirm if the entered address is accurate.
The dilemma lies in the fact that even after selecting an address from the dropdown, the alert still appears due to the input blurring out.
Is there a way to ensure that the alert only displays when no Google-suggested place was selected and the input actually blurs?
<template>
<input
type="text"
name="address"
@blur="onBlur()"
/>
</template>
<script>
//...
mounted: function() {
this.autocomplete = new google.maps.places.Autocomplete(
document.getElementById(this.id),
this.options
);
this.autocomplete.addListener('place_changed', (blur) => {
console.log('place changed ');
let place = this.autocomplete.getPlace();
this.setAddress(place);
});
},
methods: {
onBlur() {
this.isThisYourAddress();
},
isThisYourAddress() {
return swal('test');
}
}
</script>