Can the total amount in the shopping basket be updated dynamically? For example, if I have two items in my cart that cost €18 and I add another item, I want the total to automatically adjust without needing to refresh the page. Currently, my 'calculate total' property gives me two separate options: 14.00 and 12.00. I would like it to calculate the sum dynamically as 14.00 + 12.00 = 26
Thank you for any assistance.
<template>
<div>
<div >
<div >
<u>
<li v-for="item in shop" :key="item.id">
{{ item.label}} : {{ item.cost }}€
</li>
</u>
<button @click="addItem">Add</button>
</div>
<div >
<u>
<li v-for="item in shop" :key="item.id">
{{ item.label}} : {{ item.cost }}€
</li>
</u>
</div>
<p>{{ total}}</p>
</div>
</div>
</template>
<script>
computed:{
totalbasket(){
let total = 0
this.shop.forEach(item=>{
total += item.cost
})
return total
}
}
</script>