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: stackoverflow.com/questions/43210508/… — soeik
– soeik, Commented Sep 20, 2018 at 17:19

trk · Accepted Answer · 2018-09-20 17:28:03Z

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, 2018 at 17:28

trk

2,23815 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Marina Mosti · Accepted Answer · 2018-09-20 17:40:36Z

0

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

answered Sep 20, 2018 at 17:40

Marina Mosti

4612 silver badges7 bronze badges

Comments

Chi · Accepted Answer · 2020-12-06 16:54:27Z

0

You can do it like this:

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

answered Dec 6, 2020 at 16:54

Chi

3084 silver badges12 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-15 01:28:35Z

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://v2.vuejs.org/v2/guide/class-and-style.html

edited Jul 15, 2022 at 1:28

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 20, 2018 at 17:21

kaizer_bun

493 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related