提问者:小点点

如何从Firebase rtdb在vue应用程序中显示小计


我正在尝试在我的vue应用程序中修复此方法。它将采用一个对象数组,该数组将包含已售商品的价格,并且需要返回所有元素的总计算。问题是它会出错并且不正确,进入db和控制台日志我看到正确的值,我需要在代码中修复某些内容吗?

我保存的值是从一个v-model字段正确地在火力基地,可能我不需要的循环?

        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"
    }
  ]

NB:更清楚地说,数据正确保存在rtdb中,这不是问题所在,但我需要在vue前端显示从rtdb加载的所有已售商品的精确计算。


共1个答案

匿名用户

您可以使用减少函数:

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))