Первое правило: не вызывайте функции в своем 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>