Memaparkan nilai fungsi yang dikembalikan dalam Vue 3: Panduan

Question

Saya sangat baru dengan vue js. Saya perlu memberikan nilai yang dikembalikan oleh fungsi berikut kepada baris dalam jadual:

Fungsinya ialah:

getGroup(id){
        this.users.forEach(element =>{
            if(element.id===id)
                return element.group.group_name;
        });
}

Tag html dalam templat ialah:

<td>{{ getGroup(ticket.assignee.assignee_id) }}</td>

Walau bagaimanapun, tiada apa yang dipaparkan dalam baris yang sepadan dalam lajur ini. Bagaimanakah saya boleh memaparkan nilai yang dikembalikan dalam baris ini?

Kod penuh di sini:

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

Tangkapan skrin kandungan yang diberikan: Klik sini

Answer 1

Cuba cari dan kembalikan kumpulan pengguna:

getGroup(id){
  return this.users.find(u => u.id === id).group.group_name
}