As I embark on my journey with VueJS, I must admit that it is an amazing framework. However, I have encountered some issues with the Vue-Resource implementation, as it only seems to work properly half the time.
When attempting to retrieve data from my server, I have noticed that it does not always finalize the data retrieval process.
For instance, consider the code snippet below where I am making a request to my server. Despite the request being made, only half of the data gets loaded.
The response data that I am trying to parse appears in the following format:
[{ city: "New York", amount: 8 }, { city: "San Francisco", amount: 18 }]
The peculiar issue I am facing is that while logging the data to the console works perfectly fine, rendering it seems to remove the 'amount' property. It retains the 'city' values but eliminates the 'amount' associated with each location.
I have tried to find solutions for this problem based on Vue.js 0.9, but I am actually using Vue.js 2.3.3 and Vue-resource 1.3.3.
vm = new Vue({
el: '#devApp',
data: {
citiesCount: [],
},
mounted: function()
{
this.getLocationsCityCount();
this.getLatestLocations();
},
methods: {
getLocationsCityCount: function(cb)
{
var test = this.$http.get('/api/v1/locations/count/cities').then(
success => {
console.log(success.body.response);
this.citiesCount = success.body.response;
},
error => {
console.log('error');
console.log(error);
}
);
},
}
});