v-for内的v-for无限循环

时间:2018-09-13 02:36:13

标签: vue.js infinite-loop

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

基本上我有这个:

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

enter image description here

1 个答案:

答案 0 :(得分:0)

原因是我使用了一个函数(checkLSL())来计算循环中的总数。我有一些有关如何修复的信息,似乎工作正常。 谢谢