How can i access data from nested object about vue-data-table

[uwla]

Hi! Sorry for the late reply

So, are you trying to display a single user? Because in your data response there is only one user object and one role object.
If yes, I think it doesn't make sense to display a single user in a table. Generally, tables are used to display several items.

If you still want to display only a single user, you should do the following

var data = {
    user: {
        name: 'Jonh',
        email: '[email protected]', 
        phone: '+002011111111',
    },
    role: {
        name: 'admin_role',
        permissions: [
            {
                id: 1,
                name: 'add user',
            },
            {
                id: 2,
                name: 'edit user',
            },
            {
                id: 3,
                name: 'delete user',
            }
        ],
    },
}

export default {
    computed: {
        data() {
            let user = {}

            for (let key in data.user) {
                user[key] = data.user[key]
            }

            return [
                user // single user. If you have more, put them in the array
            ]
        },

        dataTableProps() {
            return {
                data: this.data,
                columns: [
                    {
                        title: 'Email Address',
                        key: 'email',
                    },
                    {
                        key: 'name', // this will generate the title 'Name'
                    },
                    {
                        title: 'Phone number',
                        key: 'phone', // this will generate the title 'Name'
                    },
                ]
            }
        }
    }
}

Now, in your vue template:

<template>
    <div>
        <h1>User dashboard</h1>
        <data-table v-bind="dataTableProps" />
    </div>
</template>

I hope this helps!