I am currently in the process of developing a unique shopping application using Vue.js and Django. To populate the inventory of products, I make API calls in my JavaScript file utilizing Axios.
Here is a snippet from my JavaScript file where I retrieve data from the database:
delimiters: ['[[', ']]'],
data: {
inventory: [],
merchants: [],
cart: [],
},
...,
mounted: function (){
axios
.get("http://127.0.0.1:8000/get_products/").then(response => {
(this.inventory = response.data)
return axios.get("http://127.0.0.1:8000/get_merchants/")
})
.then(response => {
(this.merchants = response.data)
})
},
The fetched results are successfully rendered on the template with the following HTML code:
<div class="main_block">
<div class="products" v-for="product in inventory">
<div class="mini_block info_block">
<div class="left merch_img_holder"></div>
<h1 class="left info">[[ product.fields.merchant ]]</h1>
<div class="clear"></div>
</div>
<div class="product_image">
<img v-bind:src="/media/+[[ product.fields.image ]]" width="420" alt="Image">
</div>
<div class="mini_block info_block">
<div class="left info">
<div class="">[[ product.fields.name ]]</div>
<div class="">[[ product.fields.price ]]</div>
</div>
<div class="right info">
<i class="fas fa-caret-square-down" @click="deleteFromCart([[ product ]])"></i>
<i class="fas fa-caret-square-up" @click="addToCart([[ product ]])"></i>
</div>
<div class="clear"></div>
</div>
</div>
</div>
I am striving to incorporate items into the cart by utilizing
<i class="fas fa-caret-square-up" @click="addToCart()"></i>addToCart(product){
this.cart.push(product)
},
Upon testing this functionality, it seems that the cart gets updated as expected. I've verified this by observing the output of a computed property that returns this.cart.length upon adding items.
Now, the focus shifts towards displaying these cart items properly in my cart view section. The corresponding HTML code for this segment looks like:
<div v-for="(item, index) in cart" class="cart_item">
<div class="cart_img_holder">
<img v-bind:src="/media/+[[ item.image ]]" width="80" alt="Image">
</div>
<ul class="cart_item_detail">
<h3>[[ item.name ]]</h3>
<li>[[ item.price ]]</li>
<li>[[ item.merchant ]]</li>
<li>Qty: [[ item.qty ]] | <a @click="removeFromCart(index)">Delete</a></li>
</ul>
</div>
However, there appears to be an issue either with appending empty objects to the cart or encountering difficulties in retrieving said items. Upon inspecting the console logs, the cart items are being displayed as undefined. Any suggestions on resolving this matter and effectively showcasing the cart objects?