Question

我正在运行以下查询： $users=User::with('roles.permissions')->get()->unique();

此查询返回结果集：

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"},
],
},

    ],
},

]

使用roles返回用户详细信息，我想在Vue Component表中显示此结果集。

我的vue component读了method

  read:function(){
        axios.get('/userlist')
        .then(response=>{
            console.log(response.data);

        })

    }

这是我的桌子

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

如何在html表中分别显示用户，角色和权限。

Answer 1

您应该将API结果存储在组件data中。但是您需要准备好组件数据才能接收用户。

data() {
  return {
     users: []
  }
}

现在，您应该使函数更新此全新数据。

read:function(){
    axios.get('/userlist')
    .then(response=>{
        this.users = response.data;
    })

}

现在，我假设您想将用户角色显示为串联字符串。然后，您需要一个函数来执行此操作。

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

然后，您可以在模板中使用此功能来处理用户角色。

<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

模板中的呈现如下所示：

from itertools import isclice, cycle filler = [1, 2] nans = df.b.isna() df.loc[nans, 'b'] = list(islice(cycle(filler), sum(nans)))

您还需要在数据中扮演角色：

<td v-for="role in roles">{{role}}</td>

最后使您的函数更新数据

data() {
  return {
     roles: []
  }
}

如何在vue.js组件中显示嵌套数组数据

2 个答案: