javascript - 如何使用 Vuejs 对数组中的多个不同对象求和？

Question

我正在开始使用 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);}
  },

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

我去过 SO 并找到了类似的线程，但是我无法解决我的问题。

Answer 1

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

我们通过映射数组来获取价格值，即 10,15。然后我们减少数组，添加它，然后推送它。

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

一个工作示例可以是

let 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"
    }
  ]
}]
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
  });
});
console.log(newojv)