代码之家 › 专栏 › 技术社区 › etranz

如何检查json中是否存在admin

frontend vue.js javascript

0

etranz · 技术社区 · 4 年前

我正在用vuejs构建一个应用程序。我正在从一个api获取json数据。

json包含两个用户。

其中一个用户具有管理员角色,另一个不具有管理员角色

我想在显示用户时检查用户是否具有管理员角色

json数据

users数组对象

{
    "users": [{
        "id": "1f7524c5-108e-4f33-a58e-1b8efbbac7c",
        "name": "nwafor nnamdi",
        "email": "nna@gmail.com",
        "phone": "+2348032547845",
        "admin": {
            "id": "1f0e88a1-ac3d-480f-b8ca-e3c2481039c7",
            "user_id": "1f7524c5-108e-4f33-a58e-1b8efbbac7c",
            "role": "manager",
            "created_at": "2021-12-31T10:35:10.000000Z",
            "updated_at": "2021-12-31T11:08:51.000000Z",
            "deleted_at": null
        }
    }, {
        "id": "jduw-dieke-9e8ej-eje8-ej383j",
        "name": "admin",
        "email": "admin@gmail.com",
        "phone": "08032547856"
    }]
   }


<tr v-for="(user, index) in users" :key="index">
  <td>
  <button id="make-admin" @click="changeRole('none')" v-if="user.admin && user.admin.role == 'manager'"> Remove Manager</button>
  <button id="make-admin" @click="changeRole('manager')"  v-else-if="user.admin && user.admin.role == 'super'"> Remove Super Admin</button>
  <button id="make-admin"  @click="changeRole('super')" v-if="user.admin && user.admin.role == 'none'"> Super Admin</button>
  <button id="make-admin"  @click="changeRole('super')" v-if="user.admin && user.admin.role == 'none'"> Manager</button>
  </td>
</tr>

我正在获取用户。admin为null

1 回复 | 直到 4 年前

1

Nikola Pavicevic 4 年前

像下面这样的东西?

new Vue({
  el: '#demo',
  data() {
    return {
       users: [{
        "id": "1f7524c5-108e-4f33-a58e-1b8efbbac7c",
        "name": "nwafor nnamdi",
        "email": "nna@gmail.com",
        "phone": "+2348032547845",
        "admin": {
            "id": "1f0e88a1-ac3d-480f-b8ca-e3c2481039c7",
            "user_id": "1f7524c5-108e-4f33-a58e-1b8efbbac7c",
            "role": "manager",
            "created_at": "2021-12-31T10:35:10.000000Z",
            "updated_at": "2021-12-31T11:08:51.000000Z",
            "deleted_at": null
          }
        }, 
        {
            "id": "jduw-dieke-9e8ej-eje8-ej383j",
            "name": "admin",
            "email": "admin@gmail.com",
            "phone": "08032547856",
        }]
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<table>
<tr v-for="(user, index) in users" :key="index">
  <td>{{ user.name }}</td>
  <td>
    <button id="make-admin" @click="changeRole('none')" v-if="user.admin?.role == 'manager'"> Remove Manager</button>
    <button id="make-admin" @click="changeRole('manager')"  v-else-if="user.admin?.role == 'super'"> Remove Super Admin</button>
    <button id="make-admin"  @click="changeRole('super')" v-if="user.admin?.role == 'none'"> Super Admin</button>
    <button id="make-admin"  @click="changeRole('super')" v-if="user.admin?.role == 'none'"> Manager</button>
  </td>
</tr>
</table>
</div>