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

Question

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

这就是我现在拥有的：

我有一个函数，我从一个名为 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)

Answer 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 条件将确保您不输出数量文本。