[Vuejs]-Conditional CSS on Vue JS based on Date

I recommend computing a new array that has the formatted date and day-based class names. The computed prop caches the results, which improves the rendering performance if the component needs to be re-rendered.

1. Create a component method (named "classForDay") that returns a class name based on the day of week:

   const dayClasses = [
     'inactive', // 0 = Sunday
     'active',   // 1 = Monday
     'inactive', // 2 = Tuesday
     'inactive', // 3 = Wednesday
     'active',   // 4 = Thursday
     'inactive', // 5 = Friday
     'inactive', // 6 = Saturday
   ]
   
   export default {
     methods: {
       classForDay(date) {
         return dayClasses[new Date(date).getDay()]
       }
     }
   }
   

2. Create a computed property that returns a new inventory array, including the formatted date (from this.formatDate()) and the day-based class name (from this.classForDay()):

   export default {
     computed: {
       computedInventory() {
         return this.inventory.map(inv => ({
           ...inv,
           FormattedDate: this.formatDate(inv.DeliveryDate),
           DayClass: this.classForDay(inv.DeliveryDate),
         }))
       }
     }
   }
   

3. Use the computed property in the template, binding DayClass and FormattedDate:

   <template>
     <div class="row">
       <div v-for="(e, i) in computedInventory" >
         <div class="col s2 m3" v-if="e.Hidden == false" >
           <div class="card blue-grey darken-1" :class="e.DayClass" >
             Current date   {{ e.FormattedDate }}h
           </div>
         </div>
       </div>
     </div>
   </template>
   

Without having to change much of your code and if you’re not going to use this logic on another page, you can add a new array as a variable for the day classes and a new method to fetch the data, like tony19 suggested.

            <script>
    const dateOptions = {
      weekday: "long",
      hour: 'numeric',
      year: "numeric",
      month: "numeric",
      day: "numeric",
      minute: 'numeric' ,
      hourCycle : "h24"
    };

    const dayClasses = [
      'sundayClass',
      'mondayClass',
      'teusdayClass',
      'wednesdayClass',
      'thursdayClass',
      'fridayClass',
      'saturdayClass'
    ]

    export default {
      data() {
        return {
          inventory: []
        };
      },
      mounted() {
        this.load();
        setInterval(this.load, 10000);
      },
      methods: {
        load() {
          fetch("http://localhost:8081/api/v1/prod/inventory")
            .then((res) => res.json())
            .then((data) => (this.inventory = data))
            .catch((err) => console.log(err.message));
        },
        formatDate(inStr) {
          const d = new Date(inStr);
          return d.toLocaleDateString("de-DE", dateOptions);
        },
        getDayClass(date) {
          return dayClasses[new Date(date).getDay()]
        }
      },
    };
    </script>

And call the method in your template

    <template>
      <div class="row">
        <div v-for="(e, i) in inventory"
          :key="e.PreorderID + e.ArticleNumber"
        >
          <div class="col s2 m3" v-if="e.Hidden == false">
            <!--  The following DIV should be getting a specific CSS class based on the day of the week -->
            <div class="card blue-grey darken-1" :class="getDayClass(e.DeliveryDate)" >
              Vurrent date   {{ formatDate(e.DeliveryDate) }}h
            </div>
          </div>
        </div>
      </div>
    </template>