0
228
ViewsAgrupe productos y muestre la cantidad de la matriz de productos usando Vue3
Logré contar cada elemento repetido en mi matriz, ahora solo quiero mostrar solo uno y cada cantidad de cantidad de producto.
Esto es lo que tengo ahora:
Tengo una función que estoy exportando desde un archivo llamado Helpers.js y luego uso en mi componente Vue.
Ayudantes.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; }, {}); }Componente de pedidos:
import { groupBy } from "@/Utils/Helpers"; ... rest of the component... const groupedOrders = computed(() => groupBy(props.order.products, (product) => product.id));Esto está en mi plantilla:
<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>Estos son los datos que estoy ingresando en la consola:
Alguna pista de cómo hacer que muestre solo un Modi y muestre la cantidad, algo así como Modi (Qtty. 4)
1 answers
Answer question0
Actualmente, su código itera a través de la matriz de productos que crea un mosaico para cada producto dentro de la matriz de productos debido al v-for en su componente OrderItem .
Para lograr lo que desea tener, simplemente tiene que tomar un elemento de la matriz y generar la longitud de la matriz, en lugar de atravesarla.
<div class="mt-5 mx-8" v-for="(products, groupIndex) in groupedOrders"> <OrderItem :product="products[0]" :key="groupIndex" /> <span>Quantity: {{ products.length }}</span> </div> Tenga en cuenta que debe asegurarse de que la matriz de products no esté vacía para acceder al primer elemento sin un error. Si usa la función de agrupación que proporcionó, esto debería estar bien.
Ahora, lo que probablemente hará esto es agregar la cantidad detrás del mosaico de su producto. Para imprimir la cantidad dentro de su mosaico de producto, debe proporcionarla a su componente OrderItem .
<OrderItem :product="products[0]" :key="groupIndex" :quantity="products.length" /> Luego en OrderItem.vue :
... component stuff ... props: [ ... your other props ... 'quantity', ... your other props ... ] Y en la plantilla OrderItem , en la posición de tu agrado:
<span v-if="quantity > 0"> Quantity: {{ quantity }} </span> En caso de que no proporcione la quantity , la condición v-if se asegurará de que no genere el texto de la cantidad.