Estoy creando una aplicación con vuejs. Estoy obteniendo datos json de una API.
El json contiene dos usuarios.
Uno de los usuarios tiene rol de administrador y el otro no tiene rol de administrador
Quiero verificar si el usuario tiene un rol de administrador cuando muestra los usuarios
datos json
objeto de matriz de usuarios
{ "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>Estoy obteniendo user.admin es nulo
¿Algo como seguir?
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>