Получить значение из данных массива в Vue

Question

Я новичок в Vue и пытаюсь получить одно значение из массива. Я делаю запрос получения axios, где я возвращаю массив пользователей, содержащий значения (name, display_name, role и несколько других полей). Я могу получить все эти значения и смонтировать мою таблицу с компонентом ниже:

<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>

Итак, я хотел изменить этот класс showRole в зависимости от значения user.display_name, если user.display_name равно «Manager», например. Я бы показал btn-опасность. Я просто не знаю, как я могу получить это значение для сравнения, если я пытаюсь использовать this.user.display_name в методе showRole, я ничего не получаю (не определено). Спасибо за любую помощь.

Answer 1

Я думаю, что вы должны использовать метод вместо этого, так как вы не можете передавать параметры в вычисляемые свойства .

Используйте это

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

---

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