How do i make the Total Visible using Vue.js?

Admin 1
Viewed 57

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.

cart vue.js html javascript
2 Answers

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 .

user_168855760

This is happening because Vue.js methods are not reactive, so they are only executed when called and not when a parameter or variable changes.

I think computed properties may fit your needs.

They are similar to data, but let you define a function. The result is reactive, meaning that if any variable inside the function changes, the result is recalculated. In your case, if an item is added or removed from the cart, the total would be recalcuted.

Instead of doing

methods: {
  // ...
  // 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();

<h3 id ="tot">R </h3>

You could move the method total() into a computed property:

new Vue({
  el: '#gallery', 
  data: { /* ... */ },
  computed: {
    total() {
      let total = 0;
      for(let i = 0; i < this.cart.length; i++){
        total += this.cart[i].price;
      }
      return total;
    }
  },
  methods: { /* ... */ }
});

<h3 id ="tot">{{ total }}</h3>

Here, the function total() will be called every time there is a change on this.cart and the content of <h3> will be updated accordingly.

user_115912120
Related