使用 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 并显示数量，比如 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 条件将确保您不会输出数量文本。

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

Group products and display quantity from the products array using Vue3

javascript

arrays

object

vue.js

vuejs3