Vue.js 从v-for循环计算多个总计

我有一个独特的情况，我有一个用户（员工）的v-for循环，在其中我有另一个v-for循环检查用户累积的假期

简单地说

v-for get user
    //Print users name
    v-for get any leave associated with this user
          //Print that days Annual Leave
          //Print that days Sick Leave
    v-end
    //Print total Annual Leave
    //Print total Sick Leave
v-end

“离开”数据库内容具有以下值

类型：（病假、年假、丧亲之痛等） 小时数：整数

所以本质上它会说

Thomas               Annual        Sick
------------------------------------------
Annual Leave         2 hours       0 Hours
Sick Leave           0 Hours       3 Hours
Annual Leave         4 Hours       0 Hours
-------------------------------------------
Total                6 Hours       3 Hours

John                 Annual        Sick
------------------------------------------
Annual Leave         2 hours       0 Hours
Annual Leave         2 Hours       0 Hours
-------------------------------------------
Total                4 Hours       0 Hours

现在，关于代码和我到目前为止所掌握的内容：

{{user\u list.first\u name}
{{userleave.type}
//请假
//请病假
请假总数
//打印总假期
//打印病假总额

因此，如果是病假类型，则将其添加到第二列，并将第一列设置为0，或者如果！==病假设置第一列为值，第二列为0。然后将每一面加起来，在下面打印

我尝试过一些函数形式的东西，但是我得到了无限循环，所以我有点被卡住了，因为大多数帖子并不像我想实现的那样复杂

谢谢你的帮助

编辑： 附加功能

user\u leave\u筛选（userPassed）{
var self=这个
返回this.userLeave.filter（函数（i）{
如果（i.users_id===userPassed&&
（（i.start\u time>=self.getUnix（self.firstDate）&&i.start\u time第一条经验法则，不要在HTML中调用函数。请改用

您可以获得一个经过筛选的用户列表，并将其映射为每个用户所需的数据

无论如何，我建议您在后端处理“用户离开”的映射，并尽可能地在客户端使用数据

这是我如何处理您的案例的一个示例（注意，我使用的对象结构与您可能使用的对象结构不同，因为您没有在问题中提供完整的代码）


newvue({
el:“应用程序”，
数据：{
用户列表：[
{id:1，名字：“Jon Doe”}，
{id:2，名字：“Jane Doe”}
],
用户离开：[
{userId:1，键入：“anual”，小时数：2}，
{userId:1，键入：“sick”，小时数：3}，
{userId:1，键入：“anual”，小时数：4}，
{userId:2，键入：“anual”，小时数：2}，
{userId:2，键入：“sick”，小时数：3}，
{userId:2，键入：“anual”，小时数：4}
]
},
计算：{
usersById（）{
如果（！this.userList.length）返回null；
//按id创建用户列表并保存一些迭代
返回此.userList.reduce（（列表，用户）=>{
列表[user.id]=用户；
返回列表
}, {})
},
过滤装置（）{
如果（！this.userLeave.length）返回[]；
常量用户={}
this.userLeave.forEach（leave=>{
const user=this.usersById[leave.userId]
如果（用户）{
如果（休假类型==“生病”）{
user.totalSick=typeof user.totalSick==“number”
？休假时间+用户总病假
：休假。小时；
}否则{
user.totalAnual=用户类型。totalAnual==“编号”
？休假时数+用户时数
：休假。小时；
}
如果（user.leaves==未定义）user.leaves=[]
user.leaves.push（离开）
用户[user.id]=用户
}
})
返回用户
}
}
})
。保留\u类型\u内容，
.拍摄天数\u内容，
.lsl_内容，
.总假期和职务，
.总时数，
.总时数{
显示：内联块
}

{{user.firstName}
{{userleave.type}
{{userleave.type==“anual”&&userleave.hours | | 0}}小时
{{userleave.type==“病假”&&userleave.hours | | 0}}小时
请假总数
{{user.totalAnual}}
{{user.totalSick}
我将创建一个计算属性，其中包含要显示的用户及其映射的休假和总计。例如

计算：{
usersWithLeave（）{
const unixFirstDate=this.firstDate&&this.getUnix（this.firstDate）
const unixLastDate=this.lastDate&&this.getUnix（this.lastDate）
//首先按用户映射休假条目，以便快速访问
const leaveByUser=this.userLeave.reduce（（映射，元素）=>{
//按日期筛选
如果(
（！unixFirstDate | | element.start_time>=unixFirstDate）&&
（！unixLastDate | | element.start_time[id，'All']。包括（this.userToShow）和&leaveByUser.has（id））
.map（（{.key）：id，first_name}）=>{
const leave=leaveByUser.get（id）
返回{
名字，
leave，//所有leave元素的数组
总计：休假。减少（（总计，要素）=>{
总计[element.type==='病假'？'病假'：'年度']+=element.Hours
返回总数
}，{患病人数：0，年度人数：0}）
}
})
}
}

哇，这比预期的要多。这将产生一个类似

{
名字：“托马斯”，
离开：[
{类型：'年假'，时数：2}，
{类型：'病假'，工作时间：3}，
{类型：'年假'，工时：4}
],
总数：{
病假:3,，
年度：6
}
}

现在，您可以轻松地在模板中使用它


{{user.first_name}
{{userleave.type}
{{userleave.type！=“病假”&&userleave.Hours | | 0}
{{userleave.type=='病假'&&userleave.Hours | | 0}
请假总数
{{userleave.totals.annual}
{{userleave.totals.sick}
你能发布更多的代码吗？特别是在user\u list\u filtered（）以及user\u list的数据对象中发生了什么？那里没有什么特别的事情。只是获取所有用户并保留与