I'm trying to dynamically change the background color of a table row within a v-for loop based on a condition - if global.globalGroupLevel is equal to 0, I want the background color to be one color, and if it's not 0, I want it to be another color. I know I could achieve this by duplicating the table row and using v-if and v-else directives, but that would make my code look messy. Another option I considered was using a ternary operator directly on the tr element to set the style, but I'm unsure if this is possible and how I would go about doing it.
Currently, part of my code looks like this:
<tbody>
<template v-for="global in orderItems">
<tr>
... A bunch of code
</tr>
</template>
</tbody>
As mentioned before, I could do something like this:
<tbody>
<template v-for="global in orderItems">
<tr :style="{background: global.globalGroupLevel == 0 ? '#ccc' : 'white'}">
... Bunch of code
</tr>
</template>
</tbody>
However, this approach feels overly complicated for something as simple as changing the background color of a table row. Are there any better options available to accomplish what I need?