How to show nested array data in vuejs component - laravel

Question

I'm running the following query:
$users=User::with('roles.permissions')->get()->unique();
this query returns result set:
Array = [
{
created_at: "2019-01-11 09:27:02",
deleted_at: null,
email: "admin#example.com",
email_verified_at: null,
id: 1,
name: "ADMIN",
roles: [
{id: 1, name: "Admin", slug: "Admin", description: "This is Super-Admin Role", created_at: "2019-01-11 09:27:02",
permissions: [
{id:1, name:"Create,slug:"Create"},
{id:1, name:"Read",slug:"Read"},
{id:1, name:"Delete",slug:"Delete"},
],
},
],
},
]
returns user details with roles I want to show this result set in my Vue Component table.
this my vue component read method
read:function(){
axios.get('/userlist')
.then(response=>{
console.log(response.data);
})
}
This is my table
<table class="table table-bordered">
<thead>
<th>no.</th>
<th>Name</th>
<th>E-mail</th>
<th>Roles</th>
<th>Permissions</th>
<th>Action</th>
</thead>
<tbody>
<tr v-for="(user,key) in users">
<td>{{++key}}</td>
</tr>
</tbody>
</table>
How to show user,roles and permissions separately in html table.

Answer 1

You should store your API result in your component data. But you need to prepare your component data to receive your users.
data() {
return {
users: []
}
}
Now, you should make your function update this brand new data.
read:function(){
axios.get('/userlist')
.then(response=>{
this.users = response.data;
})
}
Now, I assume that you want to display user's roles as a concatenated string. Then, you need a function to do this.
methods: {
getRoles: function(roles) {
let rolesString = ''
roles.forEach((role, index) => {
if (index != 0)
rolesString += ', '
rolesString = rolesString + role.name
})
return rolesString
},
getPermissionsFromRoles: function(roles) {
let permissionsList = []
roles.permissions.forEach((permission) => {
if (permissionsList.indexOf(permission.name) != -1) {
permissionsList.push(permission.name)
}
})
let permissionsString = ''
if (permissionsList.length > 0) {
permissionsList.forEach((permission, index) => {
if (index != 0)
permissionsString += ', '
permissionsString += permission
})
}
return permissionsString
}
}
Then, you can use this function in your template to handle your user roles.
<table class="table table-bordered">
<thead>
<th>no.</th>
<th>Name</th>
<th>E-mail</th>
<th>Roles</th>
<th>Permissions</th>
</thead>
<tbody>
<tr v-for="(user,key) in users">
<td>{{key}}</td>
<td>{{user.name}}</td>
<td>{{user.email}}</td>
<td>{{getRoles(user.roles)}}</td>
<td>{{getPermissionsFromRoles(user.roles)}}</td>
</tr>
</tbody>
</table>

Answer 2

rendering in the template will look like:
<td v-for="role in roles">{{role}}</td>
you will also need to have roles in your data:
data() {
return {
roles: []
}
}
and finally make your function update the data
function(){
.then(response=>{
this.roles = response.data
})
}