I am trying to get a list of products from an api with a mixture of vue components and the vue-router setup. I am able to console.log data out inside the function that gets the data but I am unable to get this data rendered out in the view so I can see real data on the root that the component is registered to. My gist is below for you:
https://gist.github.com/mdunbavan/65c9ad008ef06bc1c9058d76507e864e
The main areas where it looks to be getting the data is:
template: '#people-listing-template',
data: function() {
return {
products: []
}
},
mounted: function() {
this.getAllProducts();
},
methods: {
getAllProducts: function(){
this.$http.get('/collections/homepage/products.json').then(function (response) {
$.each(response.data, function(key, value) {
this.products.push(value.id);
}.bind(this));
}.bind(this), function (response) {
console.log('error getting products');
});
}
},
Please can someone tell me if there is anything wrong with this code and why it would not render the data inside the root template view?