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

当前，您的代码遍历products数组，因为您在v-for组件上使用了OrderItem组件，因此您为产品数组中的每个产品创建了一个块。

要实现您想要的结果，只需获取数组的一个元素并输出数组的长度，而不是遍历它。

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