Stuck with a shopping cart that wont add my items price together. I am not sure what it is i am doing wrong. i have created a function in my vue object that adds the totals together if its added to the cart but either i am calling it wrong or the functions wrong. at the moment i have a copy of the data array in a json file and it is not linked as i am pulling directly from the vue object but i am more interested in getting the cart to add the prices up at this stage
<div id="gallery">
<div id="cart">
<div class="card-body">
<h6 class = "fw-light">Your Shopping Cart</h6>
<ul class="list-group list-group-flush">
<!-- Change this line to add from cart.json -->
<li class="list-group-item" v-for="(item, i) in cart" :key="i">
<div class="card" style="width: 18rem;">
<b>{{item.name}}</b>
<b>R{{item.price}}</b>
<img :src="item.image" width="120px" height="auto">
<button @click="deleteItem(i)" >Remove Item</button>
</div>
</li>
</ul>
</div>
How do i call the total function from my Vue Object over here?
<p>Your Total:</p>
<h3 id ="tot">R </h3>
<button @click="checkout()" class = "btn btn-primary">Checkout</button>
</div>
My Vue Object Looks like this:
<script src = "https://unpkg.com/vue"></script>
<script>
let galleryItems = new Vue({
el: '#gallery',
data: {
items: [{
id : 1,
name : 'Double King Sized Bed',
image : 'images/beds/bigWhiteBed.jpg',
price : 20000,
description : 'A double king sized bed with a white interior and a black cover'
},
{
id : 2,
name : 'Queen Sized Bed with Storage Drawers',
image : 'images/beds/darkDrawerBed.jpg',
price : 15000,
description : 'A queen sized bed with a dark storage drawer'
},
{
id : 3,
name : 'King Sized Bed',
image : 'images/beds/fancyBed.jpg',
price : 12000,
description : 'A king sized bed with a white interior and a black cover'
},
{
id : 4,
name : 'Pine King',
image : 'images/beds/fancyPineBed.jpg',
price : 8000,
description : 'A twin sized bed with a white interior and a black cover'
},
{
id : 5,
name : 'Queen Sized Bed',
image : 'images/beds/royalBed.jpg',
price : 15000,
description : 'A queen sized bed with a white interior and a black cover'
},
{
id : 6,
name : 'Glass coffee table',
image : 'images/coffee/glassCoffeeTable.jpg',
price : 3000,
description : 'Stylish Glass Coffee table'},
{
id : 7,
name : 'Wooden coffee table',
image : 'images/coffee/whiteCoffeeTable.jpg',
price : 2000,
description : 'White Coffee table'},
{
id : 8,
name : 'Wooden Coffee Table on wheels',
image : 'images/coffee/whitewheelCoffeeTable.jpg',
price : 3000,
description : 'Easy To Move coffee table'},
{
id : 9,
name : 'Two Piece Coffee table set',
image : 'images/coffee/yellowCoffeeTableSet.jpg',
price : 2000,
description : 'Two tables One Price'},
{
id : 10,
name : 'Large Black Leather L-Shaped home Cinema Couch',
image : 'images/couches/blackLshape.jpg',
price : 30000,
description : 'Stylish Black Leather L-Shaped home Cinema Couch '},
{
id : 11,
name : 'White Leather reading Lounger',
image : 'images/couches/fancyChair.jpg',
price : 30000, description : 'Single seated Reading chair'},
{
id : 12,
name : 'Black and white Home office desk',
image : 'images/desks/blackAndWhiteDesk.jpg',
price : 2000,
description : 'A Stylish Work Station'},
{
id : 13,
name : 'Large L-Shaped Work Station',
image : 'images/desks/LshapeOffice.jpg',
price : 4000,
description : 'A spacious Corner Unit Desk'},
{
id : 14,
name : 'Combined Leisure and Home Office Station',
image : 'images/desks/officeBed.jpg',
price : 13000,
description : 'Combine work, relaxation and Play'},
{
id : 15,
name : 'Truss Table styled desks',
image : 'images/desks/trussTableOfficeDesk.jpg',
price : 1500,
description : 'Easy to assemble and move'},
{
id : 16,
name : 'Jet Black Chair',
image : 'images/misc/blackChair.jpg',
price : 1000,
description : 'A chair for any Environment'},
{
id : 17,
name : 'Dinning Room Table',
image : 'images/misc/whiteDiningRoomTable.jpg',
price : 10000, description : 'Dining Room Table for the family'}
],
cart : []
},
methods: {
add2cart(item){
this.cart.push(item);
},
deleteItem(index){
this.cart.splice(index, 1);
},
// add a total for items in cart
total(){
let total = 0;
for(let i = 0; i < this.cart.length; i++){
total += this.cart[i].price;
}
return total;
}
} });
document.getElementById('tot').innerHTML = galleryItems.total();
</script>
At the Moment it is showing up as 0, each time and i cant get it to add up the prices when an item goes into the cart. Extreme Rookie at this.
You can use computed property instead of method for calculating total:
data: {},
computed: {
total() {
let total = 0;
for (let i = 0; i < this.cart.length; i++){
total += this.cart[i].price;
}
return total;
}
},
methods: {}
Then you can use {{ total }} in your template part:
<p>Your Total:</p>
<h3 id ="tot">{{ total }}</h3>
<button @click="checkout()" class = "btn btn-primary">Checkout</button>
</div>
A simple definition of computed:
A computed property is used to declaratively describe a value that depends on other values. When you data-bind to a computed property inside the template, Vue knows when to update the DOM when any of the values depended upon by the computed property has changed.
In your code, whenever this.cart change (for example by adding or removing an item) the value of total re-calculated. So your total is always sync with your cart and everything is doing by vue itself.
You can read more about computed in here: Computed Properties and Watchers .