Get value from array data in Vue

Question

I'm kinda new to Vue and i'm struggling to get one value from an array. I'm making an axios get request where I return an array of users containing the values (name, display_name, role, and few others fields). I'm able to get all these values and mount my table with the component below:

<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() {
            // wanted to diff button colors here
        }
    },

    mounted() {
        axios.get('/api/users').then(response => this.users = response.data);
    },

}
</script>

So I wanted to modify that class showRole depending on the value of user.display_name, if the user.display_name is equal to "Manager" e.g. I would show a btn-danger. I just don't know how can I get this value to compare, if I try to use this.user.display_name on showRole method I get nothing (undefined). Thanks for any help.

Answer 1

I think you should use a method instead, as you can't pass parameters to computed properties.

Use this

...
methods : {
    showRole(user){
        //code that returns the button class
    }
}
...

---

<button :class="showRole(user)">Activate