我对 vue js 还很陌生。我需要将以下函数返回的值渲染到表中的行:
功能是:
getGroup(id){
this.users.forEach(element =>{
if(element.id===id)
return element.group.group_name;
});
}
模板中的html标签是:
<td>{{ getGroup(ticket.assignee.assignee_id) }}</td>
但是,该列相应行中没有呈现任何内容。 如何显示这些行中返回的值?
完整代码在这里:
<template>
<div class="p-10">
<table>
<thead>
<tr>
<th class="p-5">Subject</th>
<th class="p-5">Requester</th>
<th class="p-5">Requested</th>
<th class="p-5">Type</th>
<th class="p-5">Priority</th>
<th class="p-5">Group</th>
<th class="p-5">Updated</th>
<th class="p-5">Assignee</th>
<th class="p-5">Cause of suspention</th>
</tr>
</thead>
<tbody>
<tr v-for="ticket in tickets" :key="ticket.id">
<td>{{ ticket.subject }}</td>
<td>{{ ticket.requester }}</td>
<td>{{ ticket.requested }}</td>
<td>{{ ticket.type }}</td>
<td>{{ ticket.priority }}</td>
<td>{{ getGroup(ticket.assignee.assignee_id) }}</td>
<td>{{ ticket.updated }}</td>
<td>{{ ticket.assignee.assignee_name }}</td>
<td>{{ ticket.suspension_cause }}</td>
</tr>
</tbody>
</table>
</div>
<script>
import usersData from '../assets/users_data.json'
import ticketsData from '../assets/tickets_data.json'
export default {
name: 'ViewTicket',
data() {
return {
users:[],
tickets:[],
group: ''
}
},
methods:{
getData(){
setTimeout(function(){this.users=usersData;}.bind(this),1000);
setTimeout(function(){this.tickets=ticketsData;}.bind(this),1000);
},
getGroup(id){
this.users.forEach(element =>{
if(element.id===id)
return element.group.group_name;
});
}
},
created:function(){
this.getData();
},
};
</script>
渲染内容的屏幕截图: 点击这里
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
尝试查找并返回用户组:
getGroup(id){ return this.users.find(u => u.id === id).group.group_name }