sourcecode

어레이 Vuej에서 속성의 모든 값을 합산하다

copyscript 2022. 7. 31. 22:21
반응형

어레이 Vuej에서 속성의 모든 값을 합산하다

저는 작은 앱을 만들고 있는데, 오브젝트 2의 속성 내에 오브젝트 배열을 가지고 있습니다.하나는 '라벨'이고 하나는 '값'입니다.제가 원하는 것은 속성 '값'의 모든 값을 합산하여 하나의 총값을 얻는 것입니다.

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개).어떻게 하면 좋을까요?잘 부탁드립니다.

대시톤으로 응답, vue에 대해 재생됨

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

이 조작은 유효합니다.

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

이것은 vue와는 관계가 없습니다.javascript 질문처럼 보입니다.이러한 질문에는 수많은 방법이 있습니다.단순할수록 각각에 대해 간단하게 할 수 있습니다.

es4:

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

그러나 {{ totalRequest }}을(를) 표시하는 방법을 물었으므로 계산된 속성을 확인할 수 있습니다.

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

즉, vue가 뷰에서 데이터를 동적으로 설정함으로써 대시톤의 답변을 받아들여 다음을 수행할 수 있습니다.

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

언급URL : https://stackoverflow.com/questions/43737304/add-up-all-values-of-a-property-in-an-array-vuejs

반응형