Conditional styling in v-for vuejs

Question

i have made a calendar in momentjs and would like to color e.g the weekends differently.

The dates and days are rendered in a v-for like so:

<tr v-for="(day, index) in days" :key="index" class="grid-container">
    <td class="grid-item">{{ day.date.format("Do") }}</td>
    <td class="grid-item">{{ day.date.format("dddd") }}</td>
    <td class="grid-item">{{ day.workhours }}</td>
    <td class="grid-item">{{ day.overtime }}</td>
    <td class="grid-item">{{ day.flextime}}</td>
    <td class="grid-item">{{ day.sickness}}</td>
    <td class="grid-item">{{ day.vacation}}</td>
   </tr>

is it possible to change e.g the background color of all of these td's if

day.date == "Saturday"

tony19 · Accepted Answer · 2022-07-15 21:19:50Z

5

You can use class binding

update: I missed the name of the day, I added what Jose Fernández suggested

template:

<tr
  v-for="(day, index) in days"
  :key="index"
  v-bind:class="{ active: day.format('dddd') == 'Saturday' }"
  class="grid-container"
>
  ...
</tr>

style:

<style scoped lang="scss">
.active {
  background-color: green;
}
</style>

edited Jul 15, 2022 at 21:19

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Sep 15, 2020 at 13:17

Chris

2,45616 silver badges23 bronze badges

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

2 Comments

Tobias Rathkjen Nørbygaard Over a year ago

I would have thought so too, but when i add that and look in the developer tools, the class is not added to the <tr> elements that contains Saturday. Can it have something to do with the day.date not having been formatted yet?

Tobias Rathkjen Nørbygaard Over a year ago

ty it works now, just needed to reset my eyes and implement your solution accordingly

Jose Fernández · Accepted Answer · 2020-09-15 14:45:37Z

1

I think what Chris replied is the finest solution. Although I think what you want to check is:

day.date.format("dddd") == 'Saturday'

edited Sep 15, 2020 at 14:45

answered Sep 15, 2020 at 14:39

Jose Fernández

1393 bronze badges

Collectives™ on Stack Overflow

Conditional styling in v-for vuejs

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related