[Vuejs]-Vue js Shopping cart

by

0👍

✅

Your boolean value is stored in ingredient.checked, and you can use it to control display of the price with either v-if or v-show:

<v-subheader v-if="ingredient.checked">{{ingredient.price}} €</v-subheader>

Then there’s just one small change needed to calculate the total value (assuming you only want to add the price of checked items):

   computed: {
        total() {
            var total = 0;
            for (var i = 0; i < this.ingredients.length; i++) {
                if (this.ingredients[i].checked) { // <-- this is new
                    total += this.ingredients[i].price;
                }
            }
            return total;
        }
    },

…and display the computed value just like any other variable:

<h3 class="headline mb-0">Total price: {{total}}</h3>

Leave a comment