How to conditionally apply CSS class in a VueJs object iteration?

Question

Code in Vuetify:

<v-layout row wrap> 
     <v-flex xs2 v-for="(month, key) in months" :key ="key">
          <router-link class = "decoration" :to="month.target">{{(month.month)}}</router-link>
     </v-flex>

The "v-for" is iterating through an array of objects, which have different properties:

data () {
    return {

        months: [
           {
               month: 'Gen',
               target: ''
           },
           {
               month: 'Feb',
               target: ''
           },
          and so on.

How can I conditionally apply the class underlined in the first code block, so that can underline only some months and not all of them?

Thank you in advance!

Hi! Take a look here: https://stackoverflow.com/questions/43210508/vue-js-conditional-class-styling — soeik, Sep 20 '18 at 17:19
Possible duplicate of [Vue.js: Conditional class styling](https://stackoverflow.com/questions/43210508/vue-js-conditional-class-styling) — VLAZ, Sep 20 '18 at 17:31

score 3 · Accepted Answer · answered Sep 20 '18 at 17:28

3

Just use :class = '[{"className": X}]'. Note the : immediately before the class attribute.

where, X is a computed / data property in the vue component that is Boolean. True will add the class and False won't.
className is your css classname.

answered Sep 20 '18 at 17:28

tyskr

1,532
9
15

kaizer_bun · Answer 2 · 2018-09-20T17:58:57.980

0

I believe you can do something like this:

<router-link :class="{'underlined': month.shouldUnderline}" :to="month.target">{{(month.month)}}</router-link>

Let me know if that works!

Edit: more info here (also mentions multiple classes): https://vuejs.org/v2/guide/class-and-style.html

edited Sep 20 '18 at 17:58

answered Sep 20 '18 at 17:21

kaizer_bun

19
3

score 0 · Answer 3 · answered Sep 20 '18 at 17:40

While both the other answers are correct, if i understood correctly you want both classes - the fixed and a dynamic one.

You can achieve this by doing:

<router-link class="decoration" :class="{ underlined: CONDITION }" :to="month.target">{{(month.month)}}</router-link>

You can easily set this condition on a method:

methods: {
   isUnderlined() { return SOME IF STATMENT OR SOMETHING }
}

Do not wrap the :class with brackets [] like the other answer states, as it expects an object {}

score 0 · Answer 4 · answered Dec 06 '20 at 16:54

0

You can do it like this:

<td :class="props.item[3] == 'pawned' ? 'text-red' : ''">{{ props.item[2] }}</td>

answered Dec 06 '20 at 16:54

Chi

68
2
7

How to conditionally apply CSS class in a VueJs object iteration?

4 Answers4