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

Posted 2023-02-22

【中文标题】将数组Vuejs中属性的所有值相加

【英文标题】：add up all value's of a property in an array 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 试过了，但是没有用。对象可能吗？我需要对象中的第二个属性。

【参考方案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。

非常好！谢谢