我設法計算了陣列中的每個重復元素，現在我只想顯示一個和每個產品數量的數量。
這就是我現在所擁有的：
我有一個函式，我從一個呼叫的檔案中匯出它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)
uj5u.com熱心網友回復：
目前，您的代碼會遍歷 products 陣列，由于組件v-for上的 ，您為 products 陣列中的每個產品創建了一個磁貼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條件將確保您不輸出數量文本。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/376510.html
標籤：javascript 数组 Vue.js 目的 Vuejs3