Use computed in VueJS to automatically calculate cart totals

Monday 4th of January 2021 11:47:59 PMVueJS Computed Cart Total

You can preview the results at: Demo link

According to VueJS documentation, the value of a computed property is automatically changed when the values used in the computed change.

In today's example we'll learn how to use computed to automatically calculate the total basket value when the quantity or unit price of each item in the cart changes.

<!DOCTYPE html>
<html>
<head>
    <title>Use computed in VueJS to automatically calculate cart totals - HtmlcssDownload.com</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        body{display: flex;align-items: center;justify-content: center;min-height: 100vh;background: #eee;font-family: Arial, Helvetica, sans-serif;}
        .cart{width: 500px;padding:20px;background: #fff;border-radius: 20px;}
        .cart .title{text-align: center;font-size: 19px;font-weight: bold;margin-bottom: 20px;}
        .cart .item{display: flex;align-items: center;min-height: 40px;border-bottom: 1px solid #eee;}
        .cart .item .quantity{display: flex;align-items: center;justify-content: center;width:100px;}
        .cart .item .quantity .value{width: 50px;text-align: center;}
        .cart .item .name{width: 200px;}
        .cart .item .total{width: 100px;text-align: right;}
        .cart .item .price{width: 100px;text-align: right;}
        .cart .item .group-title{width: 400px;}
        .cart .item:last-child{border:none;}
        .bold{font-weight: bold;}
        .text-right{text-align: right;}
    </style>
</head>
<body>
<div id="app">
    <div class="cart">
        <div class="title">My Cart ({{ cart.length }} items)</div>
        <div class="item bold">
            <div class="name">Product Name</div>
            <div class="quantity">Quantity</div>
            <div class="price">Unit Price</div>
            <div class="total">Total</div>
        </div>
        <div class="item" v-for="(item, index) in cart">
            <div class="name">{{ item.product_name }}</div>
            <div class="quantity">
                <button class="dec" @click.stop.prevent="item.quantity = item.quantity>1 ? item.quantity-1 : 1">-</button>
                <div class="value">{{ item.quantity }}</div>
                <button class="inc" @click.stop.prevent="item.quantity = item.quantity+1">+</button>
            </div>
            <div class="price">{{ item.unit_price }}</div>
            <div class="total">{{ item.quantity*item.unit_price }}</div>
        </div>
        <div class="item">
            <div class="group-title text-right bold">Sub Total</div>
            <div class="total bold">{{ totalCart }}</div>
        </div>
    </div>
</div>
   
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
            cart: [
                {
                    product_name: "Product name 0001",
                    unit_price: 20,
                    quantity: 1
                },
                {
                    product_name: "Product name 0002",
                    unit_price: 30,
                    quantity: 1
                },
                {
                    product_name: "Product name 0003",
                    unit_price: 60,
                    quantity: 1
                }
            ]
        },
        computed:{
            totalCart: function(){
                let total = 0;
                for (let index = 0; index < this.cart.length; index++) {
                    const element = this.cart[index];
                    total = total + (element.quantity * element.unit_price);
                }
                return total;
            }
        },
        methods:{
            
        }
    })
    
</script>
    
</body>
</html>