数组中每个元素的计算属性答案

【问题标题】：Calculated properties for each element in array数组中每个元素的计算属性
【发布时间】：2019-08-21 12:36:47
【问题描述】：

我有一个用例，其中我的数据存储有一系列产品，每个产品都有价格和数量。

我想做的是计算每种产品的“总数”（价格 x 数量）。我可以通过创建一个新的计算属性来重新计算整个数组，并在总数中附加一个新属性。

问题是，这需要在每次单个项目更改时重新计算数组中的每个项目。

我可以使用一个组件来计算和显示，但我还需要计算一个总计（即每个产品的所有计算价格的总和）。

有没有更有效的方法来做到这一点？

[
  {
    "Product ID": 1,
    "Price": 10,
    "Quantity": 5,
    "Calculated Total": 50
  },
  {
    "Product ID": 2,
    "Price": 12,
    "Quantity": 10,
    "Calculated Total": 120
  }
]

【问题讨论】：

根据您使用计算值的方式，您可能只使用一种方法。总计的计算将需要与计算计算数组类似的计算，所以这可能不是问题，您可以使用计算数组。

标签： vue.js vuejs2 vue-component

【解决方案1】：

您可以使用计算值映射原始数组并对值求和。例如，假设原始数组名为 originalArray，请执行以下操作：

 computed: {
   computedTotal() {
      let sum = 0
      originalArray.map(item => sum += item["Calculated Total"])
      return sum
  }
}

【讨论】：