Javascript 使用v-if语句对列表进行Vue.js小计

我想知道如何计算vue.js列表上的总数。 我的情况有点复杂，所以请允许我举个例子。 假设我正在呈现一个发票项目表。这是我的密码：

<table>
<template v-for="(invoice_item, index) in invoice_items" v-if="invoice_item.category === 'widgets'">
    <tr>
        <td>@{{ invoice_item.name }}</td>
        <td><input type="number" class="inline-edit" v-model="invoice_item.rate"></td>
        <td><input type="number" class="inline-edit" v-model="invoice_item.quantity"></td>
        <td><input type="number" class="inline-edit" v-model="invoice_item.activation_fee"></td>
        <td class="subtotal">@{{ computeSubTotal(invoice_item) }}</td>
    </tr>
</template>
</table>

这很有效。但是，现在我想显示所有小计的总数。换言之：

我该怎么办

---

谢谢

使用计算属性进行计算

console.clear（）
新Vue({
el:“应用程序”，
数据：{
发票项目：[
{
名称：“社区/支持”，
比率：5.20，
数量：1，
激活费：3.00，
类别：“小部件”
},
{
名称：“基础设施”，
收费：269.00，
数量：3，
激活费：1.00，
类别：“小部件”
},
{
名称：“基础设施”，
收费：269.00，
数量：3，
激活费：1.00，
类别：“材料”
},
]
},
计算：{
//可能需要一个更好的名字，但这只是一个例子
itemsWithSubTotal（）{
返回此.invoice\u items.map（item=>({
项目,，
小计：本次计算小计（项）
}))
},
//计算按类别分组的所有小计的总数
totalByCategory（）{
//按类别对项目进行分组
设grouped=this.itemsWithSubTotal
.减少（（acc，val）=>{
//这一行完成了下面几行所做的一切，但是以一种非常简单的方式
//简洁，可能令人困惑的方式。
//（acc[val.item.category]=acc[val.item.category]| |[]）。推送（val）
//如果尚未为当前阵列设置阵列
//类别，添加一个
如果（！acc[val.item.category]）
acc[val.item.category]=[]
//将当前值推入值集合
//这一类
acc[val.item.category]。推送（val）
//返回累加器（对象）
返回acc
}, {})
//创建一个对象，该对象包含每个类别的总数
返回对象.key（分组）.reduce（（acc，val）=>{
acc[val]=分组[val]。减少（（总计，项目）=>总计+=项目。小计，0）
返回acc
}, {})
}
},
方法：{
computeSubTotal:函数（发票\项目）{
//formatPrice在此处被删除，因为它未在问题中定义
返回（（parseFloat（发票项.费率）*parseFloat（发票项.数量）+parseFloat（发票项.激活费））；
},
}
})

输入{
宽度：5em
}

{{invoice_item.name}
{{invoice_item.subtotal}
总计：{{totalByCategory[“小部件”]}

回答得很好！仍在努力理解这一切。acc[val.item.category]=acc[val.item.category]做什么？@clone45

（acc[val.item.category]=acc[val.item.category]| |[]）。push（val）

这行有点棘手，我可能写得更清楚。我在减速器中所做的是创建一个如下所示的对象：

{widgets:[…]，stuff:[…]}

。换句话说，按类别对对象进行分组

acc[val.item.category]=acc[val.item.category]| |【】

将当前类别设置为自身或空数组（如果它尚不存在）。该表达式的计算结果将是任何

acc[val.item.category]

结果，这意味着我们可以将最新的值推送到分组中。非常惊人的代码。我不得不做一些小的调整。My computeSubTotal（）函数使用了名为formatPrice的辅助函数，该函数在小计中添加了一个美元符号和逗号。这导致total+=item.subtotal执行字符串连接而不是加法。一旦修复，代码就运行得很好

computeSubTotal: function(invoice_item) {
    return(this.formatPrice((parseFloat(invoice_item.rate) * parseFloat(invoice_item.quantity) + parseFloat(invoice_item.activation_fee))));
},