如何计算数组中的总金额?
我将数据作为 prop 传递给子组件,但我被困在这里。当我控制台 log prop 时,它返回一个非常复杂的对象。我试过this.values.reduce()
功能,但不起作用。
<template>
<tr v-for="value in values" >
<th scope="row">{{$index+1}}</th>
<td>{{value.name}}</td>
<td>-</td>
<td>${{value.total}}</td>
</tr>
<tr>
<th></th>
<td><strong>Total:{{total}}</strong></td>
<td>-</td>
<td>-</td>
</tr>
</template>
<script>
export default {
props: ['values'],
ready: function() {
}
}
</script>
如果其他人遇到与我相同的情况,我想我会添加这个答案。我需要从嵌套对象中获取值,然后将它们推送到数组中,然后再减少它们:
total: function(){
let total = [];
Object.entries(this.orders).forEach(([key, val]) => {
total.push(val.price) // the value of the current key.
});
return total.reduce(function(total, num){ return total + num }, 0);
}
这里使用ES7.entries
循环遍历如下所示的对象:
orders = {
1: {title: 'Google Pixel', price: 3000},
2: {title: 'Samsung Galaxy S8', price: 2500},
3: {title: 'iPhone 7', price: 5000}
}
然后,您可以使用以下命令在模板中显示总计:
<span> {{total}} </span>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)