As a newcomer to Vue, I'm facing some difficulties in extracting a single value from an array. My Axios get request returns an array of users with fields such as name, display_name, role, and more. I have successfully retrieved all these values and displayed them in my table component:
<template>
<div class="container">
<table class="mt-3 table roboto table-stripped table-hover table-sm">
<thead class="thead-light">
<th>Name</th>
<th>Username</th>
<th>Profile</th>
<th class="text-center">Is manager</th>
</thead>
<tbody v-for="user in users">
<td v-text="user.name"></td>
<td v-text="user.username"></td>
<td v-text="user.display_name"></td>
<td class="text-center">
<button
class="letter-shadow btn-sm font-500 grey-darkest roboto letter-spacing"
:class="showRole">Activate
</button>
</td>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
users: [],
}
},
computed: {
showRole() {
// Need to change button color based on user's display_name
}
},
mounted() {
axios.get('/api/users').then(response => this.users = response.data);
},
}
</script>
I am trying to dynamically change the button color based on the value of user.display_name. If the user is a "Manager", I want to apply the btn-danger class. However, I am unable to access user.display_name in the showRole method as it returns undefined. Any assistance would be greatly appreciated.