MattB
8 months ago
1052
4
Vue

How to cross reference tables

Posted 8 months ago by MattB

I know that in Laravel I can reference the "name " column of one table using the key from another, but how does one do that in Vue? I'm using the below table layout from Vuetify but can't see how to get the role name from the Roles table using the Role_id from the users table:

<template>
    <div>
        <v-toolbar flat color="white">
            <v-toolbar-title>Users</v-toolbar-title>
        </v-toolbar>
        <v-data-table
            :headers="headers"
            :items="users"
            :items-per-page="5"
            class="elevation-1"
            flat
        >
        </v-data-table>
    </div>
</template>

<script defer>
    export default {
        data () {
            return {
                headers: [
                    {
                        text: 'Username',
                        align: 'left',
                        value: 'username',
                    },
                    { text: 'Email', value: 'email' },
                    { text: 'Role', value: 'role_id' },

                ],
                users: [],
            }
        },
        created() {
            this.loadUsers();
        },
        methods: {
            loadUsers(){
                if (axios == null) {
                    return;
                }
                axios.get('/api/user').then(res=>{
                    if(res.status === 200){
                        this.users=res.data.users;
                    }
                }).catch(err=>{
                    console.log(err);
                });
            }
        }
    }
</script>

Controller:

public function index()
    {
        $allUsers = User::all();
        $allRoles = Role::all();
        return Response::json([
            'users' => $allUsers,
            'roles' => $allRoles
        ], 200);
    }

Many thanks

Please sign in or create an account to participate in this conversation.