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

Question

我正在开发一个小应用程序,我有一个包含对象的数组,在对象2属性中,一个叫做'label',一个叫'value'.我想要的是将属性'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个属性'value').我怎样才能做到这一点？提前致谢.

回答dashton,转载为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);