CODEWITHSUNDEEP
javascriptcssvue.js
Jamie
Jamie

Reputation: 10886

Vue.js append multiple classes

I'm trying to append multiple classes when the user clicks on a item i have this this:

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

But it does only append the bg-white. Is there a better way?

Upvotes: 1

Views: 234

Answers (2)

Saeed
Saeed

Reputation: 2269

You can do that in multiple ways:

: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]"

more info

Upvotes: 1

Roland
Roland

Reputation: 27719

Try this:

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

and in your methods:

is_item(item) {
 return this.form.score === item
}

or even better

:class="classes(item)"

and in your methods:

classes(item) {
 return form.score === item ? ['text-black', 'bg-white'] : ''
}

Upvotes: 0

Related Questions