vue.js - v-for 内的 v-for 无限循环

问题描述

有人可以帮我找出如何在循环中实现循环以打印出人员和人员年假的报告。

基本上我有这个：

<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="user_leave in user_leave_filtered(user_list['.key'])">
    <div class="first_date_content">
        {{ user_leave.start_time | formatDate }}
    </div>
    <div class="days_taken_content">
        {{ checkLSL(user_leave.hours, user_leave.type, false) }}
    </div>
  </div>
  <div class="leave_content">
    <div class="total_leave_title">
        Total Leave Taken
    </div>
    <div class="total_hours">
        {{ getTotalLeave() }}
    </div>
  </div>
</div>

因此，这将遍历 Firebase 数据库并获取所有用户，然后逐个遍历每个用户，并使用 [.key] 发现用户离开并在输出时遍历所有离开。然后到下一个用户，然后离开。

虽然这可行，但它会继续无限循环并在我的控制台中显示。

vue.esm.js?efeb:591 [Vue warn]: You may have an infinite update loop in a component render function.

有人可以解释一下没有无限循环的更好方法或避免它不断循环的解决方案吗？

谢谢

编辑

过滤功能

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

    return passed
})
},

标签： vue.jsinfinite-loop

vue.js - v-for 内的 v-for 无限循环

问题描述

解决方案

推荐阅读