I'm currently working on a basic shopping cart system using Laravel and Vue.js. I've been able to add items to the basket and retrieve them successfully up to a certain point, but I'm facing challenges when it comes to displaying these items in the view.
Upon navigating to my basket route, the basket view is loaded triggering the following Vue code:
new Vue({
el: '#basket',
ready: function () {
this.fetchBasket();
},
methods: {
fetchBasket: function(){
this.$http.get('api/buy/fetchBasket', function (basketItems) {
this.$set('basketItems', basketItems);
});
}
}
});
While this code works fine and data is returned in the console:
{027c91341fd5cf4d2579b49c4b6a90da:
{id: 1, name: "A Gnarly Tree", price: 15, quantity: 2}}
027c91341fd5cf4d2579b49c4b6a90da:
{id: 1, name: "A Gnarly Tree", price: 15, quantity: 2}
id:1
name:"A Gnarly Tree"
price:15
quantity:2
The issue arises when nothing shows up in the actual view itself. My attempt to use v-for to populate a table seems to be failing:
<tbody>
<tr v-for="item in basketItems">
<td>@{{ item.name }}</td>
<td>@{{ item.price }}</td>
<td>@{{ item.quantity }}</td>
<td>@<button class="btn btn-primary">Update</button></td>
</tr>
</tbody>
I'm stuck at this point and unsure of what's causing the problem. Any insights would be greatly appreciated.