CODEWITHSUNDEEP
vue.jsnuxt.js
Tobias Rathkjen Nørbygaard
Tobias Rathkjen Nørbygaard

Reputation: 29

Conditional styling in v-for vuejs

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"

Upvotes: 0

Views: 143

Answers (2)

Chris
Chris

Reputation: 2397

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>

Upvotes: 5

Jose Fern&#225;ndez
Jose Fern&#225;ndez

Reputation: 139

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

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

Upvotes: 1

Related Questions