从 v-for 循环计算多个总计

Question

我有一个独特的情况，我有一个用户（员工）的 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

现在是代码和我到目前为止所拥有的：

<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>

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

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

谢谢您的帮助

编辑：附加功能

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

第一条经验法则，不要在 HTML 中调用函数。 请改用计算属性。

您可以获取过滤后的用户列表并将其map以呈现每个用户所需的数据。

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

这是我如何解决您的案例的示例（请注意，我没有使用您可能正在使用的相同对象结构，因为您没有在问题中提供完整的代码）

 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>

Answer 2

我将创建一个计算属性，其中包含您要显示的用户以及他们映射的休假和总数。 例如

computed: {
  usersWithLeave () {
    const unixFirstDate = this.firstDate && this.getUnix(this.firstDate)
    const unixLastDate = this.lastDate && this.getUnix(this.lastDate)
    // first map the leave entries by user for quick access
    const leaveByUser = this.userLeave.reduce((map, element) => {
      // Filter out by dates
      if (
          (!unixFirstDate || element.start_time >= unixFirstDate) &&
          (!unixLastDate || element.start_time <= unixLastDate)
      ) {
        const elements = map.get(element.users_id) || []
        elements.push(element)
        map.set(element.users_id, elements)  
      }
      return map
    }, new Map())

    // now construct a filtered array of users then map to one with leave attached
    return this.userList
        .filter(({'.key': id}) => [id, 'All'].includes(this.userToShow) && leaveByUser.has(id))
        .map(({'.key': id, first_name}) => {
          const leave = leaveByUser.get(id)
          return {
            first_name,
            leave, // an array of all leave elements
            totals: leave.reduce((totals, element) => {
              totals[element.type === 'Sick Leave' ? 'sick' : 'annual'] += element.Hours
              return totals
            }, { sick: 0, annual: 0 })
          }
        })
  }
}

哇，这比预期的要多。 这将产生一个看起来像的对象数组

{
  first_name: 'Thomas',
  leave: [
    { type: 'Annual Leave', Hours: 2 },
    { type: 'Sick Leave', Hours: 3 },
    { type: 'Annual Leave', Hours: 4 }
  ],
  totals: {
    sick: 3,
    annual: 6
  }
}

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

<div v-for="user in usersWithLeave">
  <div class="user_heading"><h2>{{ user.first_name }}</h2></div>
  <div class="report_content" v-for="userleave in user.leave">
      <div class="leave_type_content">
        {{ userleave.type }}
      </div>
      <div class="days_taken_content">
        {{ userleave.type !== 'Sick Leave' && userleave.Hours || 0 }}
      </div>
      <div class="lsl_content">
      {{ userleave.type === 'Sick Leave' && userleave.Hours || 0 }}
      </div>
  </div>
  <div class="leave_content">
      <div class="total_leave_title">
        Total Leave Taken
      </div>
      <div class="total_hours">
        {{ userleave.totals.annual }}
      </div>
      <div class="total_hours">
        {{ userleave.totals.sick }}
      </div>
  </div>
</div>