Только начал изучать Vue.js и с толкнулся с вот такой проблемой:
у меня есть несколько компонентов (1 компонент - 1 строка в корзине товаров, такая реализация из-за избыточного количества связей на backend'e)
Пытаюсь посчитать общую сумму всех товаров. (каждый компонент имеет значение allPrice = цену*количество)
но как сделать так чтобы родительский компонент видел и складывал, а также вычитал при необходимости
Я пробую вот так, но безрезультатно:
ParentCart.vue
в родительском компоненте пробую прослушать данные потомков
export default {
data() {
return {
}
},
computed: {
handleAdd: function(text) {
console.log(text.$children);
}
}
}
Cart.vue
здесь считаю цену на количество одного товара и пытаюсь ее передать родителю
<template>
<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>
<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 (в общих чертах)
<parent-cart inline-template>
@foreach($carts as $cart)
<tr>
<td>
{{ ($cart->product)->title ?? null }}
</td>
<td>
<cart :price="{{ (($cart->product)->price)->value }}"
:cart-amount="{{ $cart->amount }}"
v-bind:all-price="handleAdd"
></cart>
</td>
</tr>
@endforeach
</parent-cart>
