将数组Vuejs中属性的所有值相加答案

【问题标题】：add up all value's of a property in an array Vuejs将数组Vuejs中属性的所有值相加
【发布时间】：2017-09-29 22:37:38
【问题描述】：

我正在开发一个小型应用程序，我有一个包含对象的数组，在对象 2 属性中，一个称为“标签”，一个称为“值”。我想要的是把属性'value'的所有值加起来，这样我就有一个总值。

Vue/JS

data() {

totalRequest: 0,

   donutData: [
        { label: 'Openstaande verzoeken', value: 20 },
        { label: 'Geaccepteerde verzoeken', value: 25 },
        { label: 'Afgewezen verzoeken', value: 10 }
    ],

},

created() {
        this.totalRequest = //here goes the function to add up all value's of the property 'value' (total value should be 55)
}

HTML

total value {{ totalRequest }}

所以在这个例子中，我有 3 个对象，总价值为 55（所有 3 个属性“值”）。我怎样才能做到这一点？提前致谢。

dashton 的回答，为 vue 转载

created() {
        this.totalRequest = this.donutData.reduce((acc, item) => acc + item.value, 0);
}

【问题讨论】：

Array.Reduce 就是您所需要的。 donutData.Reduce( (acc, item) => { return acc += item.value; }, 0);
我已经用 Array.Reduce 试过了，但是没有用。对象可能吗？我需要对象中的第二个属性。

标签： javascript arrays vue.js vuejs2

【解决方案1】：

这将起作用：

var sum = donutData.reduce((acc, item) => acc + item.value, 0);

【讨论】：

好吧，这太棒了。我将在针对 VueJS 的问题中重现答案。
当我们在 Vuex 计算属性中引入局部变量来获取数组值的总和时，它会失去响应性。这个解决方案克服了这个问题。

【解决方案2】：

这与vue无关，似乎是一个javascript问题，有很多方法可以做到这一点，更简单的就是做一个forEach：

es4:

for(i in donutData) { this.totalRequest += donutData[i].value; }

但是当您询问如何显示 {{ totalRequest }} 时，您可能想查看计算属性：

https://vuejs.org/v2/guide/computed.html

这是 vue 必须在视图中动态设置数据的一种方式，因此您可以采用 dashton 的回答并执行以下操作：

HTML

total value {{ totalRequest }}

Vue/js

data() {
   donutData: [
        { label: 'Openstaande verzoeken', value: 20 },
        { label: 'Geaccepteerde verzoeken', value: 25 },
        { label: 'Afgewezen verzoeken', value: 10 }
    ],

},
computed: {
    totalRequest() {
      return this.donutData.reduce((acc, item) => acc + item.value, 0);
    }
}

【讨论】：

在这些地方使用计算是一种更好的方法。 +1。
非常好！谢谢