How to dynamically add multiple classes in Vue.js

Question

I want to add multiple classes when the user clicks on an item. Currently, I have this code snippet:

<div :class="[ item === form.score ? 'text-black bg-white': '' ]"
    @click="form.score = item"
    v-for="item in 10">
   {{ item }}
</div>

However, only the bg-white class is being added. Is there a more efficient solution for this?

Answer 1

Answer №1

There are several ways to achieve this:

:class="[ item === form.score ? 'text-black': '', item === form.score ? 'bg-white': '']"

or

:class="[ 'text-black': item === form.score, 'bg-white': item === form.score ]"

or

:class="[ 'text-black bg-white': item === form.score]"

Answer 2

There are several ways to achieve this:

:class="[ item === form.score ? 'text-black': '', item === form.score ? 'bg-white': '']"

or

:class="[ 'text-black': item === form.score, 'bg-white': item === form.score ]"

or

:class="[ 'text-black bg-white': item === form.score]"

Answer 3

Give this a shot:

:class="{ 'text-black': is_selected(item), 'bg-white': is_selected(item) }"

and in your functions:

is_selected(item) {
 return this.data.value === item
}

or an improved version would be

:class="selected_classes(item)"

and in your functions:

selected_classes(item) {
 return data.value === item ? ['text-black', 'bg-white'] : ''
}

Answer 4

Give this a shot:

:class="{ 'text-black': is_selected(item), 'bg-white': is_selected(item) }"

and in your functions:

is_selected(item) {
 return this.data.value === item
}

or an improved version would be

:class="selected_classes(item)"

and in your functions:

selected_classes(item) {
 return data.value === item ? ['text-black', 'bg-white'] : ''
}