将嵌套对象的值相加

Posted 2023-02-22

【中文标题】将嵌套对象的值相加

【英文标题】：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;
    ,

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

---

【参考方案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>