如何从firebase rtdb显示vue应用中的小计

Question

我试图在我的vue应用程序中修复此方法。它将采用一个对象数组，该数组将包含销售项目的价格，并需要返回所有元素的总计算。问题是，它将是错误的，它是不正确的，进入db和控制台日志我看到正确的值，我需要在代码中修复一些东西吗?

我保存的值是从一个v-model字段正确地在firebase，可能我不需要for循环?

showSubtotalSelled(items){
let sum = 0
for(let i = 0; i < items.length; i++){
console.log(i)
//if( items[i].sellPrice === items[i].selledItemsValue ){
//  let parsed = items[i].sellPrice.replace(',', '.')
//  sum = ( parseFloat(sum) + parseFloat(parsed) ).toFixed(2)
//} else {
let parsed = items[i].sellPrice.replace(',', '.')
console.log(parsed)
sum = ( parseFloat(sum) + parseFloat(parsed) * items[i].pz ).toFixed(2)
//}
}
if( sum === 0.00 ){
return '0,00'
} else {
return sum.replace('.', ',')
}
}   

这是我对条目

使用的firebase rtdb方案

-NJ_CNw4b8Yx1UZoNz_j
color: "GRIGIO"
id: 55
name: "TERRACES BULLDOG"
pz: "1"
sellPrice: "30,00"
size: "XL"
uid: "-NJ_CNw4b8Yx1UZoNz_j"

这是我从rtdb加载的文档示例。计算比预期多了30欧元，我想在加载数据并用于显示小计时，有东西被求和两次?

"articoliVenduti": [
null,
{
"color": "NERO",
"id": 1,
"name": "SALERNITANA ZUCCOTTO TEAM",
"pz": "1",
"sellPrice": "13",
"size": "UNICA"
},
{
"color": "GRANATA",
"id": 2,
"name": "SALERNITANA FELPA TECH",
"pz": "1",
"sellPrice": "80",
"size": "XL"
},
{
"color": "GRANATA",
"id": 3,
"name": "SALERNITANA TRAPUNTA",
"pz": "1",
"sellPrice": "55",
"size": "UNICA"
},
{
"color": "GRANATA",
"id": 4,
"name": "SALERNITANA MAGLIONE NATALIZIO",
"pz": "1",
"sellPrice": "45",
"size": "L"
},
{
"color": "MAZZOCCHI",
"id": 5,
"name": "SALERNITANA MAGLIA GARA THIRD 2022/2023",
"pz": "1",
"sellPrice": "95",
"size": "M"
},
{
"color": "BLU NAVY",
"id": 6,
"name": "LYLE SCOTT SOFTSHELL JACKET",
"pz": "1",
"sellPrice": "130",
"size": "L"
},
{
"color": "BLU NAVY",
"id": 7,
"name": "TERRACES CAPPELLO LANA",
"pz": "1",
"sellPrice": "30",
"size": "UNICA"
},
{
"color": "GIALLO",
"id": 8,
"name": "TERRACES CAPPELLO LANA",
"pz": "1",
"sellPrice": "30",
"size": "UNICA"
},
{
"color": "GRIGIO",
"id": 9,
"name": "TERRACES FELPA ZIP",
"pz": "1",
"sellPrice": "65",
"size": "XL"
},
{
"color": "BLU NAVY",
"id": 10,
"name": "TERRACES TESCHIO",
"pz": "1",
"sellPrice": "30",
"size": "XL"
},
{
"color": "GRIGIO",
"id": 11,
"name": "TERRACES BULLDOG",
"pz": "1",
"sellPrice": "30",
"size": "XL"
}
]

注:为了更清楚，数据被正确地保存在rtdb中，这不是问题，但我需要在value前端显示从rtdb加载的所有销售项目的确切计算。

Answer 1

您可以使用reduce函数:

const arr = [{"color": "NERO", "id": 1, "name": "SALERNITANA ZUCCOTTO TEAM", "pz": "1",    "sellPrice": "13", "size": "UNICA"}, {"color": "GRANATA", "id": 2, "name": "SALERNITANA FELPA TECH", "pz": "1", "sellPrice": "80", "size": "XL"}, {"color": "GRANATA", "id": 3, "name": "SALERNITANA TRAPUNTA", "pz": "1", "sellPrice": "55", "size": "UNICA"}, {  "color": "GRANATA", "id": 4, "name": "SALERNITANA MAGLIONE NATALIZIO", "pz": "1", "sellPrice": "45", "size": "L"}, {"color": "MAZZOCCHI", "id": 5, "name": "SALERNITANA MAGLIA GARA THIRD 2022/2023", "pz": "1", "sellPrice": "95", "size": "M"}, {"color": "BLU NAVY", "id": 6, "name": "LYLE SCOTT SOFTSHELL JACKET", "pz": "1", "sellPrice": "130", "size": "L"}, {"color": "BLU NAVY", "id": 7, "name": "TERRACES CAPPELLO LANA", "pz": "1",   "sellPrice": "30", "size": "UNICA"}, {"color": "GIALLO", "id": 8, "name": "TERRACES CAPPELLO LANA", "pz": "1", "sellPrice": "30", "size": "UNICA" }, {"color": "GRIGIO", "id": 9, "name": "TERRACES FELPA ZIP", "pz": "1", "sellPrice": "65", "size": "XL"}, {  "color": "BLU NAVY", "id": 10, "name": "TERRACES TESCHIO", "pz": "1", "sellPrice": "30",  "size": "XL"}, {"color": "GRIGIO", "id": 11, "name": "TERRACES BULLDOG", "pz": "1",  "sellPrice": "30,85", "size": "XL" } ]
function showSubtotalSelled(items){
return items.reduce((a, b) => a + +b.sellPrice.replace(',', '.'), 0)
}   
console.log(showSubtotalSelled(arr))