You're setting the gps via this.gps inside the geocode function when you should be using vm.gps
Passing variables between Vue methods/data?
Hi,
This is my first time working with Vue. I am trying to make a store locator. I imagine the workflow going like this:
User visits website, types their location. Website places a marker on the map, then sends a post request to my Laravel app with the user's GPS coordinates. Then my app will run a Harversine query to find the closest stores to that GPS location, and return an array with these locations, in JSON.
This is what I have so far:
var app = new Vue({
el: 'body',
data: {
address: '',
gps: '',
},
watch: {
address: function() {
console.log('Locating new address..');
this.locateAddress();
this.fetchCloseStores();
}
},
methods: {
createMap: function() {
this.map = new google.maps.Map(document.querySelector('#storeLocatorMap'), {
center: { lat: 42, lng: -71 },
zoom: 12
});
},
locateAddress: function() {
var geocoder = new google.maps.Geocoder();
var vm = this;
geocoder.geocode({ address: this.address }, function(results, status) {
if (status === google.maps.GeocoderStatus.OK) {
vm.map.setCenter(results[0].geometry.location);
var position = results[0].geometry.location;
this.gps = position;
return new google.maps.Marker({
map: vm.map,
position: position,
});
}
// If failed to find address
alert('Failed to locate address');
});
},
fetchCloseStores: function() {
this.$http.post('http://requestb.in/qjx5z5qj', this.gps).then((response) => {
// success callback
console.log(response.status);
}, (response) => {
// error callback
});
},
}
});
The problem I am having is, fetchCloseStores() is not able to read gps, so it posts nothing to my app, as it's empty. Can someone please point out what I am doing wrong?
I'm using Vue 1.0.25 and Vue Resource 0.9.3.
Thank you
Please or to participate in this conversation.