Question

我正在开发一个小应用程序，我有一个带有对象的数组，在对象2属性中，一个名为＆＃39; label＆＃39;和一个价值＃39;我想要的是将所有属性值加起来，以便我有一个总值。

的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个属性＆＃39;值＆＃39;）。我怎样才能做到这一点？提前谢谢。

按照仪表板回答，为vue复制

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

Answer 1

这与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);
    }
}

Answer 2

这将有效：

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

在数组Vuejs中添加属性的所有值

2 个答案: