I am pretty new to vue js. I need to render the value returned by the following function to the row in the table:
The function is:
getGroup(id){ this.users.forEach(element =>{ if(element.id===id) return element.group.group_name; }); }
The html tag in template is:
<td>{{ getGroup(ticket.assignee.assignee_id) }}</td>
However, nothing is rendered in that column respective rows. How can I show the value returned in those rows?
The full code is here:
<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>
A screenshot of what is rendered: click here
Advertisement
Answer
Try to find and return user group:
getGroup(id){ return this.users.find(u => u.id === id).group.group_name }