I am building an app with vuejs. I am getting a json data from an api.
The json contains two users.
One of the user has admin role and the other does not have admin role
I want to check if the user has admin role when it displays the users
json data
users array object
{
"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>
I am getting user.admin is null
Something like following ?
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>