使用 Vue3 对产品数组中的产品进行分组并显示数量

Posted 2023-02-22

【中文标题】使用 Vue3 对产品数组中的产品进行分组并显示数量

【英文标题】：Group products and display quantity from the products array using Vue3

【发布时间】：2022-01-12 18:05:11

【问题描述】：

我设法计算了数组中的每个重复元素，现在我只想显示一个和每个产品数量。

这就是我现在拥有的：

我有一个函数，我从一个名为 Helpers.js 的文件中导出，然后在我的 Vue 组件中使用。

Helpers.js：

export const groupBy = (arr, criteria) => 
    return arr.reduce((obj, item, index) => 
        const key = typeof criteria === 'function' ? criteria(item, index) : item[criteria];

        if (!obj.hasOwnProperty(key)) 
            obj[key] = [];
        

        obj[key].push(item);
        return obj;
    , );

订单组件：

import  groupBy  from "@/Utils/Helpers";
... rest of the component...

const groupedOrders = computed(() => groupBy(props.order.products, (product) => product.id));

这是在我的模板中：

<div class="mt-5 mx-8" v-for="products in groupedOrders">
                 products.length 
                <OrderItem  
                    v-for="(product, index) in products"
                    :product="product"
                    :key="index" 
                />
            </div>

这是我在控制台登录的数据：

任何线索如何让它只显示一个莫迪并显示数量，比如Modi (Qtty. 4)

【问题讨论】：

请同时添加相关的html代码，让我们看看你是如何构建实际前端的。

将我的 Order 组件的 HTML 添加到主帖中

【参考方案1】：

目前，由于OrderItem 组件上的v-for，您的代码遍历产品数组，您为产品数组中的每个产品创建一个磁贴。

要实现你想要的，你只需要从数组中取出一个元素并输出数组的长度，而不是遍历它。

<div class="mt-5 mx-8" v-for="(products, groupIndex) in groupedOrders">
    <OrderItem
        :product="products[0]"
        :key="groupIndex" 
        />
    <span>Quantity:  products.length </span>
</div>

请记住，您需要确保 products 数组不为空，以便访问第一个元素时不会出错。如果你使用你提供的分组功能，应该没问题。

现在这很可能是在您的产品磁贴后面添加数量。为了在您的产品磁贴中打印数量，您需要将其提供给您的OrderItem 组件。

<OrderItem
        :product="products[0]"
        :key="groupIndex"
        :quantity="products.length"
        />

然后在OrderItem.vue:

... component stuff ...
props: [
    ... your other props ...
    'quantity',
    ... your other props ...
]

在OrderItem模板中，在你喜欢的位置：

<span v-if="quantity > 0"> Quantity:  quantity  </span>

如果您不提供quantity，v-if 条件将确保您不输出数量文本。

【讨论】：

谢谢！，似乎按预期工作