Как посчитать данные нескольких дочерних компонентов в Vue.js?

Question

[Anton October]

Только начал изучать 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>

Answer 1

[Negwereth]

Списки должны состоять из "контейнера", то есть родительского компонента, который знает о данных и умеет ими манипулировать, и "глупых" компонентов, которые должны просто отображать входящие данные.

В вашем случае Корзина должна быть контейнером, а строки - глупыми компонентами.

Comments

[Anton October]

думаю стоит переписать бек, спасибо

[Negwereth]

Антон Клочков, зачем?

Answer 2

[Александр Аксентьев]

1. Зачем такой изврат с разделение корзины с двумя функциями на несколько частей.
2. использовать vuex

Comments

[Anton October]

Изврат.. хм, я не сомневаюсь, поэтому и пишу в IT сообщество в надежде на подсказу как правильно сделать.
В моем случае не получится вытащить и посчитать эти данные?

[Александр Аксентьев]

Антон Клочков,
Я бы не стал выделять каждую строчку таблицы в отдельный компонент, какой смысл в этом? Кода только больше.
Поэтому такой проблемы бы не было без разделения на компоненты.

Но в любом случае придётся что-то где-то считать и хранить глобально.
Поэтому нужен vuex.
Без vuex это игра в песочнице и половина возможностей недоступны или делаются дикими костылями.

На vuex создать простейший state с товарами, а потом считаать их где угодно и когда угодно.