将嵌套对象的值相加答案

【问题标题】：Adding up a value from a nested object将嵌套对象的值相加
【发布时间】：2021-04-30 06:15:07
【问题描述】：

我正在开展一个项目，以从 API 获取订单并将它们显示在带有一些基本信息的仪表板中（我的第一个项目）。目前我显示的内容如下：

从左到右的字段：日期、订购的产品数量、价格

我目前正在遍历订单中的所有产品并显示金额，因此它显示“1 15”，价格也是如此。我想把它们加起来，然后只显示“16”。

我正在尝试创建一种方法来做到这一点，但我似乎无法让它工作。这是我当前的代码。

HTML

<tr v-for="(order, index) in orders"
                            v-bind:class="index % 2 === 0 ? 'bg-white' : 'bg-gray-50'">
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ order.id }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                {{ order.deliveryName }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                {{ order.createdAt }}
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <span v-for="(product) in order.products">
                                    {{ product.amount }}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <span v-for="(product) in order.products">
                                    {{ product.amount * product.price }}<br>
                                </span>
                            </td>

我尝试删除 order.products 循环，而是在一个方法中这样做，但我无法让它工作。例如（我尝试稍微调整方法无济于事）

在 HTML 中： {{ getOrderAmount(order)}}

在脚本中：

getOrderAmount: function (order) {
        let amount = 0;
        order.forEach(product) in order.products
        {
            amount += product.amount
        }
        return amount;
    },

我该怎么做。非常感谢您的帮助！

【问题讨论】：

标签： php html vue.js

【解决方案1】：

您可以通过使用计算属性对产品数量/prive 求和来映射您的orders，然后在模板中使用该属性：

computed(){
  mappedOrders(){
        this.order.map((order)=>{
                 order.productsAmount=order.products.reduce((acc,curr)=>{
                     return acc+=curr.amount;
                },0)
        
     order.sumPrices=order.products.reduce((acc,curr)=>{
                     return acc+=curr.amount * curr.price ;
                },0)

        return order;
      })

   }
}

在模板中：

<tr v-for="(order, index) in mappedOrders" ..>
     ...
  <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <span >
                                    {{ order.productsAmount}}
                                </span>
                            </td>
                            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                <span >
                                    {{ order.sumPrices}}<br>
                                </span>
                            </td>
</tr>

【讨论】：