Javascript 如何使用Vuejs对阵列中的多个不同对象求和？

我正在开始使用Vue。我正在努力计算数组对象中不同元素的总和

我的数组如下所示：

    sites: [{
       sku: 10001,
       name: "Product A",
       totalPrice: '',
       values: [{
          price: 10,
          discount: 5,
          color: "red"
       },
       {
           price: 15,
           discount: 8,
           color: "black"
       }]
    },
    {
      sku: 10002,
      name: "Product B",
      totalPrice: '',
      values: [{
         price: 13,
         discount: 3,
         color: "purple"
       },
       {
           price: 20,
           discount: 5,
           color: "green"
       }]
   }]

我正在尝试对价格求和，并将其设置为

totalPrice

。因此，阵列将更改totalPrice，如下所示：

sku: 10001,
      name: "Product A",
      totalPrice: 25,

sku: 10002,
      name: "Product B",
      totalPrice: 33,

我相信我需要用下面这样的方法来总结它们，但是我不知道怎么做

computed: {
    total(){ return this.sites.reduce( (total, item) => item.values. price + total  ,0);}
  },

如何计算价格之和并将其设置为总价

我已经旅行了这么多，发现类似的线程，但没有什么，我可以得到工作与我的问题

computed: {
  total() {
    let newojv = []
    sites.forEach((item, _) => {
      let s = item.values.map((items2, _) => {
        return items2.price;
      })
      let sum = s.reduce((a, b) => a + b);
      newojv.push({
        sku: item.sku,
        name: item.name,
        totalPrice: sum
      });
    });
    return newojv;
  }
}

首先针对下面的每个对象数组

{
  sku: 10001,
  name: "Product A",
  totalPrice: '',
  values: [{
      price: 10,
      discount: 5,
      color: "red"
    },
    {
      price: 15,
      discount: 8,
      color: "black"
    }
  ]
}

values: [{
      price: 10,
      discount: 5,
      color: "red"
    },
    {
      price: 15,
      discount: 8,
      color: "black"
    }
  ]

然后对于下面的每个对象数组

{
  sku: 10001,
  name: "Product A",
  totalPrice: '',
  values: [{
      price: 10,
      discount: 5,
      color: "red"
    },
    {
      price: 15,
      discount: 8,
      color: "black"
    }
  ]
}

values: [{
      price: 10,
      discount: 5,
      color: "red"
    },
    {
      price: 15,
      discount: 8,
      color: "black"
    }
  ]

我们对数组进行映射，得到价格的值，即10,15。然后我们减少数组，添加它，然后推送它

let sum = s.reduce((a, b) => a + b);
newojv.push({
    sku: item.sku,
    name: item.name,
    totalPrice: sum
});

一个有效的例子可以是

let站点=[{
库存单位：10001，
名称：“产品A”，
总价：''，
价值观：[{
价格:10,，
折扣：5，
颜色：“红色”
},
{
价格:15,，
折扣：8，
颜色：“黑色”
}
]
}, {
库存单位：10002，
名称：“产品B”，
总价：''，
价值观：[{
价格：13，
折扣：3，
颜色：“紫色”
},
{
价格:20,，
折扣：5，
颜色：“绿色”
}
]
}]
让newojv=[]
sites.forEach（（项目，41;）=>{
设s=item.values.map（（items2，)）=>{
退货项目2.价格；
})
让sum=s.reduce（（a，b）=>a+b）；
新推({
sku:item.sku，
名称：item.name，
总价：总价
});
});
console.log（newojv）

非常感谢您的帮助！我只是想知道如何更新我的数组，而不是在数组中创建新对象。我正在努力想办法，你有什么建议吗？谢谢这是不安全的。这可能会产生意外的结果。你最好使用一个新的数组，而不是在你按下按钮时使用相同的数组，因为我们在按下按钮的同时从中读取数据。啊，好的！所以我删除了旧数组并替换了它？为什么要删除第一个数组？只需将总数推送到一个新数组并返回它。问题是，为什么要将

totalPrice

存储在数据本身中？就像@weegee建议的那样，你不应该真的改变你的数据。价格的总和应该是从数据本身抽象出来的计算属性。