Using The Value Of A Loop On V-for To Set A Conditional Class

I'm generating table rows using v-for'x in y'. I'd also like to set some classes conditional based on one of the values in the loop. example:

Solution 1:

It'd just be:

<tr v-for="file in fileList" :class="{'bg-green': file.include}">

:class is the shorthand form of v-bind:class. A binding is necessary to make the value an expression.

There are several ways to write the expression but in this case the simplest is to use the object form. The keys of the properties are the class names and the values are truthy/falsey values that determine whether or not to include that class name.

Alternatives include things like:

<tr v-for="file in fileList" :class="file.include ? 'bg-green' : ''">

See https://vuejs.org/v2/guide/class-and-style.html for more information.

Share