Question

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

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

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

我正在尝试创建一种方法来执行此操作，但似乎无法使其正常工作。这是我当前的代码。

HTML

        return response()->json(['posts' => $posts])

我尝试删除 order.products 循环，而是在方法中执行此操作，但我无法使其正常工作。例如（我尝试稍微调整方法无济于事）

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

在脚本中：

<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>

我该怎么办。非常感谢帮助！

Answer 1

您可以通过使用计算属性对产品数量/私有进行求和来映射您的 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>

从嵌套对象中添加值

1 个答案: