CODEWITHSUNDEEP
javascriptcssvue.jsvuejs2vue-component
Chris
Chris

Reputation: 3129

How to conditionally change table row style during a v-for loop?

I am trying to change the background color of a table row, in a v-for loop, when the global.globalGroupLevel is 0 and if its not 0 then change it back. I know I could just duplicate the table row and use a v-if and a v-else, but that would look messy. I thought about using a ternary operator on the tr element to change the style, but not sure if that is possible and if it is then I don't know how.

My code at the moment part of the code is this

<tbody>
    <template v-for="global in orderItems">
        <tr>
            ... Bunch of code
        </tr>
    </template>
</tbody>

As mentioned, I could go with this...

<tbody>
    <template v-for="global in orderItems">
        <tr v-if="global.globalGroupLevel == 0" style='background: #ccc'>
            ... Bunch of code
        </tr>

        <tr v-else="global.globalGroupLevel != 0" style='background: white'>
            ... Bunch of code
        </tr>

    </template>
</tbody>

But that is messy and is to much for something as changing tr background color.

Do I have a better option in doing what I need to do?

Upvotes: 1

Views: 2251

Answers (3)

Roland
Roland

Reputation: 27789

As best practice I always try to avoid inline styles, and keep CSS in it's dedicated tag.

So you can add a class:

<tr :class="['gray-group', { 'white-group': global.globalGroupLevel }]"></tr>

And the css:

tr.gray-group {
  background: #ccc;
}
tr.white-group {
  background: white;
}

Also here is an working example: js fiddle

Upvotes: 1

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

Create two classes called whitebg and graybg, and use class binding as follow :

  <tr v-bind:class="{ global.globalGroupLevel == 0? 'graybg' : 'whitebg'}"></tr>

CSS rules:

 .whitebg{
    background:white
    }
 .graybg{
    background:#ccc
 }

Upvotes: 1

ssc-hrep3
ssc-hrep3

Reputation: 16089

You could use a solution with a class, like it was mentioned in another answer, or use :style as you were looking for:

:style="{ background: global.globalGroupLevel == 0 ? '#ccc' : 'white' }"

Upvotes: 1

Related Questions