配列内のプロパティのすべての値を加算するVuejs

Question

私は小さなアプリケーションで作業しています。オブジェクトとオブジェクトの2つのプロパティ、1つは 'label'と1つの 'value'という配列内にあります。私が望むのは、プロパティ 'value'のすべての値を合計して1つの合計値を持つことです。

の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 }} 

は、したがって、この例では、私は55の合計値を持つ3つのオブジェクト（すべて3プロパティ '値'）を持っています。どうすればこれを達成できますか？前もって感謝します。 dashtonによって

回答は、これは動作します

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

Answer 1

VUEのための複製：

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

Answer 2

これは、VUEとは何の関係もありません、JavaScriptの質問のように思える、の道のトンがありますこれを行うと、より簡単にforEachを実行できます。

es4：

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

しかし、あなたはあなたが計算されたプロパティを確認したい場合があります{{totalRequest}}表示する方法を尋ねたとして：、VUEは、ビュー内のデータを動的に設定する必要があります方法です

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

ますので、 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); 
    } 
}