javascript - 从Vue.JS中的子对象收集值并分配给父对象键

数据“ valueContainer”如下所示：

{
         "totalValue": 0,
         "subValues1": [
           { "value": 20 },{ "value": 30 }
         ],
         "subValues2": [
           { "value": 10 },{ "value": 40 }
         ]
        }

我正在尝试从'subValues1'和'subValues2'收集值并将它们存储在'totalValue'字段中？我一直在尝试使用计算的，但是for循环无法正常工作，这是一个尝试从第一个子对象累积值的示例

  computed: {
    totalValue: function() {
      let total;
      for (let v in this.valueContainer.subValues1) {
        total = total + v.value;
      }
      return total;
    }
  }

照我写的，我得到了NaN的totalValue。如何遍历值，累积值并将其存储为totalValue？

链接到Codepen：https://codepen.io/connorontheweb/pen/dyPvwmE

最佳答案

您可以获取键，按不需要的过滤器并迭代values数组。然后将这些值相加。

var data = { valueContainer: { totalValue: 0, subValues1: [{ value: 20 }, { value: 30 }], subValues2: [{ value: 10 }, { value: 40 }] } };

Object
    .keys(data.valueContainer)
    .filter(v => v !== 'totalValue')
    .forEach(k => data.valueContainer[k].forEach(({ value }) => data.valueContainer.totalValue += value));

console.log(data);