How to calculate data of several child components in Vue.js?

Just started to learn Vue.js and pushed to this kind of problem:

I have a few components (1 component with 1 row in the basket of goods, this implementation due to the excessive number of connections to find out e)

Trying to calculate the total amount of all goods. (each component has a value allPrice = price*quantity)
59ce42f6d914c631171386.png
but how to make parent component saw and folded, and also subtracted, if necessary

I'm trying like this, but to no avail:
ParentCart.vue
in the parent component, try to listen for these descendants
export default {
 data() {
 return {
}
},
 computed: {
 handleAdd: function(text) {
console.log(text.$children);
}
}
 }


Cart.vue
here I think the price for the amount of a single product and trying to pass the parent
<template>

the <tr>
 <td><input class="form-control" v-model="amount" name="amount" type="number" style="width: 80px"></td>
 <td><b class="form-control" style="width: 100px; margin-left: 10px">{{ allPrice }}</b></td>
</tr>

</template>

the <script>
 export default {
 props: [
'cart-amount',
'price',
'all-price'
],
data(){
 return {
 amount: 1,
 onePrice: '-'
}
},
 mounted() {
 this.onePrice = this.price;
 this.amount = this.cartAmount
},
 computed: {
 allPrice: function () {
 var priceItem = this.price * this.amount;
 return priceItem
}
}
}
</script>


html.blade.php (in General terms)
<parent-cart inline-template>
@foreach($carts as $cart)


 {{ ($cart->product)->title ?? null }}


 <cart :price="{{ (($cart->product)->price)->value }}" :cart-amount="{{ $cart->amount }}" v-bind:all-price="handleAdd"></cart>


@endforeach
</parent-cart>
June 14th 19 at 21:33
2 answers
June 14th 19 at 21:35
The lists must consist of a "container" that is the parent component that knows about the data and knows how to manipulate them, and "stupid" component, which should just display the incoming data.

In your case the Basket should be the container and the lines are stupid components.
I think we should rewrite Beck, thank you - Trisha.Kemmer38 commented on June 14th 19 at 21:38
why? - Haylie_Oberbrunner commented on June 14th 19 at 21:41
June 14th 19 at 21:37
1. Why such a perversion with the split basket with two functions into several parts.
2. use vuex
Perverted.. hmm, I doubt not, therefore, write in IT community in the hope to prompt how to make.
In my case I do not get to get and calculate this data? - Trisha.Kemmer38 commented on June 14th 19 at 21:40
,
I wouldn't have to allocate each row of the table in a separate component, what is the point in this? Code only bigger.
So this problem would not have happened without separation of components.

But in any case, you will have something somewhere to count and store globally.
Therefore, we need vuex.
Without vuex is a game in the sandbox and half of the opportunities available or made wild crutches.

On vuex to create a simple state with goods and then Scituate them wherever and whenever you want. - Haylie_Oberbrunner commented on June 14th 19 at 21:43

Find more questions by tags Vue.jsJavaScript