Too much logic in class

Question

So i have made this code, and it works as it should

<tr
          v-for="(day, index) in days"
          :key="index"
          :class="[
            { no_target: day.date.format('dddd') == 'Sunday' || day.date.format('dddd') == 'Saturday' },
            { active: moment == day.date.format('Do dddd') },
          ]"
          class="calendar-row"
        >

This is adds the class of no_target to weekend days and active to todays date. However my boss thinks this is too much logic inside of a class and would like me to move it to method or computed property. I cannot really seem to think of a solution for this.

any of you sharp minds here got a solution for this?

Answer 1

I think using a method like this could help

methods: {
    isHoliday(day) {
      const formattedDay = day.date.format("dddd");
      return ["Sunday", "Saturday"].includes(formattedDay);
    },
  },

so you can do this

<tr v-for="(day, index) in days"
          :key="index"
          :class="[
            { no_target: isHoliday(day)},
            { active: moment == day.date.format('Do dddd') },
          ]"
          class="calendar-row">

Answer 2

How about:

<tr
          v-for="(day, index) in days"
          :key="index"
          :class="[
            { no_target: isHoliday },
            { active: isActive },
          ]"
          class="calendar-row"
        >

and in you'r script:

data() {
    return {
        isHoliday: false,
        isActive: false
    }
},
mounted: {
    IsHoliday()
    IsActive()
},
methods: {
    IsHoliday() {
     if (day.date.format('dddd') == 'Sunday' || day.date.format('dddd') == 'Saturday') {
         return true;
     } else {
            return false;
       }
    },
    IsActive() {
        if(moment == day.date.format('Do dddd')) {
            return true;
        }else {
            return false;
        }
    }
}