Whenever I use console.log(e.data), I am able to retrieve values, but when attempting to display them using v-for, the data does not show up. Can someone please explain why this issue is occurring?
Below is the HTML code intended to display the values:
<div id="feed12">
<div v-for="row in data">
{{row.bussinessName}}
</div>
</div>
Here is my Vue.js code:
<script type="text/javascript">
new Vue({
el: '#feed12' ,
data: {
data: {},
},
mounted() {
navigator.geolocation.getCurrentPosition(success, error);
function success(position) {
var GEOCODING = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + position.coords.latitude + '%2C' + position.coords.longitude + '&language=en';
$.getJSON(GEOCODING).done(function(location) {
$('#country').html(location.results[0].address_components[5].long_name);
$('#state').html(location.results[0].address_components[4].long_name);
$('#city').html(location.results[0].address_components[2].long_name);
$('#address').html(location.results[0].formatted_address);
$('#latitude').html(position.coords.latitude);
$('#longitude').html(position.coords.longitude);
})
var lat = position.coords.latitude;
$.ajax({
url: 'https://n2s.herokuapp.com/api/post/filter/',
data: {
lat: position.coords.latitude,
lon: position.coords.longitude,
},
type: "POST",
dataType: 'json',
success: function (e) {
if (e.status == 1) {
self.data = e.data;
console.log(e.data)
}
}
});
console.log(lat);
}
function error(err) {
console.log(err)
}
}
})
</script>