I am looking to update the Total value in the parent component based on values from the child components.
<!--Parent Component-->
<template>
<div class="section__wrapper">
<h1>Total:{{ this.total }}</h1>
<vItem title="First Item" price=2 @clicked="onClickChild"></vItem>
<vItem title="Second Item" price=3 @clicked="onClickChild"></vItem>
</div>
</template>
<script>
import vItem from './v-item.vue';
export default {
data(){
return{
total:1000000,
}
},
components: {
vItem
}
}
</script>
<!--Child Component-->
<template>
<div class="item__body">
<div class="item__body__content">
<img src="" alt="" class="item__body__content__img">
<p>{{ this.totalOfItem }}</p>
<p class="item__body__content__title">{{ this.title }}</p>
<p class="item__body__content__price">{{ this.price }}</p>
<div class="item__body__content__control">
<button class="item__body__content__btn sell" @click="increasePrice">sell</button>
<input type="text" class="item__body__content__input" :value=this.count>
<button class="item__body__content__btn buy" @click="decreasePrice">buy</button>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
title: String,
price: Number,
},
data(){
return{
count:0,
totalOfItem: 0
}
},
methods:{
increasePrice(){
this.count -= 1
this.totalOfItem = this.count * this.price
},
decreasePrice(){
this.count += 1
this.totalOfItem = this.count * this.price
},
}
}
</script>
I need a method that decreases the total based on the number of different products. While it's simple for a single product, it becomes more complex with multiple products. Each item has its own price and quantity.