Vue.component('google-autocomplete', { | |
props: [], | |
data: function() { | |
return { | |
autoComplete: null, | |
place: {} | |
} | |
}, | |
template:'<input ref="autoComplete" placeholder="Type address..." type="text" class="form-control" v-on:keydown="keyDown"/>', | |
mounted: function() { | |
var _root = this; | |
console.log('Google Places AutoComplete Mounted.'); | |
_root.autoComplete = new google.maps.places.Autocomplete(_root.$refs.autoComplete,{types: ['geocode']}); | |
_root.autoComplete.addListener('place_changed', function() { | |
var place = _root.autoComplete.getPlace(); | |
_root.placeUpdated(place); | |
}); | |
}, | |
methods: { | |
/** Google Place Location Updated **/ | |
placeUpdated: function (place) { | |
this.place = { | |
lat: place.geometry.location.lat(), | |
lng: place.geometry.location.lng(), | |
address: place.formatted_address, | |
}; | |
this.$emit('place_updated', this.place); | |
console.log('Place emitted.'); | |
}, | |
/** Field Updated **/ | |
keyDown: function () { | |
this.$emit('key_down'); | |
console.log('keyDown emitted.'); | |
}, | |
} | |
}); | |
//Usage: <google-autocomplete @place_updated="pickupLocationUpdated" @key_down="clearErrors"> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment