Calculating multiple totals from a v-for loop

Question

I have a unique situation where I have a v-for loop of users (Staff) and inside that I have another v-for loop checking the leave a user has accumulated.

so to put it simply

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

The leave database content has these values

Type: (Sick Leave, Annual Leave, Bereavement, etc) Hours: integer

So essentially it will say

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

Now for the code and what I have so far:

<div v-for="user_list in user_list_filtered()">
   <div class="user_heading"><h2>{{ user_list.first_name }}</h2></div>
   <div class="report_content" v-for="userleave in user_leave_filtered(user_list['.key'])">
      <div class="leave_type_content">
         {{ userleave.type }}
      </div>
      <div class="days_taken_content">
         //Get Leave
      </div>
      <div class="lsl_content">
         //Get Sick Leave
      </div>
   </div>
   <div class="leave_content">
      <div class="total_leave_title">
         Total Leave Taken
      </div>
      <div class="total_hours">
         // Print Total Leave
      </div>
      <div class="total_hours">
         //Print Total Sick Leave
      </div>
   </div>
</div>

So if it is of Type Sick Leave add it to the second column and set the first column to 0 or if !== Sick Leave set first column to value and second column to 0. Then add each side up and print below.

I have tried some things as functions but I get infinite loops so I am kinda stuck as most posts are not as complicated as what I am trying to achieve.

Thanks for the help

Edit: Additional functions

user_leave_filtered(userPassed) {
  var self = this
  return this.userLeave.filter(function (i) {
    if (i.users_id === userPassed &&
      ((i.start_time >= self.getUnix(self.firstDate) && i.start_time <= self.getUnix(self.lastDate)) ||
        (self.firstDate === null || self.firstDate === '' || self.lastDate === null || self.lastDate === ''))) {
      return true
    } else {
      return false
    }
  })
},
user_list_filtered() {
  var self = this

  return this.userList.filter(function (i) {

    var passed = false

    if (self.userToShow === i['.key'] || self.userToShow === 'All') {
      // Track whether to filter out this leave or not
      self.userLeave.forEach(function (element) {
        if (element.users_id === i['.key']) {
          passed = true
        } else {}
      })
    }

    return passed
  })
},

Answer 1

First rule of thumb, don't call functions in your HTML. Use computed properties instead.

You can get a filtered user list and map it to present the data you need per user.

Anyway, I recommend you to handle the mapping of "user leaves" in the backend, and bring the data as close as you'll use it in the client.

This is an example of how I'd address your case (notice I don't use the same object structure you are probably using, since you didn't provide the full code in your question)

new Vue({
  el: "#app",
  data: {
    userList: [
      { id: 1, firstName: "Jon Doe" },
      { id: 2, firstName: "Jane Doe" }
    ],
    userLeave: [
      { userId: 1, type: "anual", hours: 2 },
      { userId: 1, type: "sick", hours: 3 },
      { userId: 1, type: "anual", hours: 4 },
      { userId: 2, type: "anual", hours: 2 },
      { userId: 2, type: "sick", hours: 3 },
      { userId: 2, type: "anual", hours: 4 }
    ]
  },
  computed: {
    usersById () {
      if (!this.userList.length) return null;
      // create a list of users by id and save a few iterations
      return this.userList.reduce((list, user) => {
        list[user.id] = user;
        return list  
      }, {})
    },
    filteredUsers () {
      if (!this.userLeave.length) return [];
      const users = {}
      this.userLeave.forEach(leave => {
        const user = this.usersById[leave.userId]
        if (user) {
          if (leave.type === "sick") {
            user.totalSick = typeof user.totalSick === "number"
              ? leave.hours + user.totalSick
              : leave.hours;
          } else {
            user.totalAnual = typeof user.totalAnual === "number"
              ? leave.hours + user.totalAnual
              : leave.hours;
          }
          if (user.leaves === undefined) user.leaves = []
          user.leaves.push(leave)
          users[user.id] = user
        }
      })
      return users
    }
  }
})

.leave_type_content,
.days_taken_content,
.lsl_content,
.total_leave_title,
.total_hours,
.total_hours {
  display: inline-block
}

<script src="https://unpkg.com/vue@2.5.17/dist/vue.min.js"></script>
<div id="app">
  <div v-for="user in filteredUsers"> <!-- NOTICE THE COMPUTED PROPERTY -->
   <div class="user_heading"><h2>{{ user.firstName }}</h2></div>
   <div class="report_content" v-for="userleave in user.leaves">
      <div class="leave_type_content">
         {{ userleave.type }}
      </div>
      <div class="days_taken_content">
         {{ userleave.type === "anual" && userleave.hours || 0 }} hours
      </div>
      <div class="lsl_content">
         {{ userleave.type === "sick" && userleave.hours || 0 }} hours
      </div>
   </div>
   <div class="leave_content">
      <div class="total_leave_title">
         Total Leave Taken
      </div>
      <div class="total_hours">
         {{ user.totalAnual }}
      </div>
      <div class="total_hours">
         {{ user.totalSick }}
      </div>
   </div>
</div>
</div>