How to display data from API to table

Hello guys, I am currently trying laravel + vue. I have the following API API

I want to make the following picture with vue.js

I made the blade version for that it resulted like following image blade

but, i dont understand how to display like shown in vue.js. Currently here is my vue.js VUE

here's my code in vue

<template>
<table class="table table-hover">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>Name</th>
                            <th>Permission</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                    <tr v-if="!roles.length" >
                        <td colspan="4" style="text-align:center;">Data not found!</td>
                    </tr>
                    <tr v-for="role in roles" :key="role.id">
                        <td>{{role.id}}</td>
                        <td>{{role.name | capitalizeFirst}}</td>
                        <!-- <td v-for="permission in permissions" :key="permission.id"> -->
                        <td>
                            <span class="label label-info label-many">{{ role.permission }}</span>
                        </td>
                        <td>
                            <a href="#" >
                                <i class="fa fa-edit" @click="editModal(role)"></i>
                            </a>
                            /
                            <a href="#" @click="deleteRole(role.id)">
                                <i class="fa fa-trash red" ></i>
                            </a>
                        </td>
                    </tr>
                    </tbody></table>


<script >          
loadRoles(){
axios.get("api/role")
         .then(({ data }) => {
                this.roles = data.data;
           });
},

let me know where i did wrong. thank you!

lostdreamer_nl

7 years ago

Best Answer

Level 53

Try and change this:

<!-- <td v-for="permission in permissions" :key="permission.id"> -->
<td>
    <span class="label label-info label-many">{{ role.permission }}</span>
</td>

into this:

<td>
    <span class="label label-info label-many" v-for="permission in role.permissions" :key="permission.id">
        {{ permission .name }}
    </span>
</td>

That should do it.

In your example, you are echo'ing role.permission which does not exist, it's role.permissions which is an array of objects.

So you loop over the array, and for each item, you echo out its name ;)

gettherefast

7 years ago

Level 1

@lostdreamer_nl oh my god! thanks for the answer! I tried over and over looping in i didnt realize it have to do inside the span, thanks a lot! (and a typo) :D

Please or to participate in this conversation.