[Vuejs]-How to display "closed" if day is not present in json data?

by

0👍

create an array of days = ["Sunday","Monday", "Tuesday"...]; then create a function to check if day exists in your array data.wrk_hours, if yes return {{item.opens_at}} to {{item.closes_at}} else return “Closed”;

<table bgcolor="#00FF00" width="100%" border="0" cellspacing="0" cellpadding="0" class="table table-hover table-bordered">
  <thead>
    <tr bgcolor="#577c14">
      <th v-for="(item,key) in days" :key="key">
        <span v-if="new Date().getDay()-1==key" class="today">{{item}}</span>
        <span v-else-if="new Date().getDay()==key" class="tomorrow">{{item}}</span>
        <span v-else class="all">{{item}}</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td v-for="(item,key) in days" :key="key">
         <span v-if="new Date().getDay()-1==key" class="today">{{ checkIfItemInWorkHours(item) }}</span>
        <span v-else-if="new Date().getDay()==key" class="tomorrow">{{ checkIfItemInWorkHours(item) }}</span>
        <span v-else >{{ checkIfItemInWorkHours(item) }}</span>
    </td>
    </tr>
 </tbody>
</table>
checkIfItemInWorkHours: function(day){
  for (let x in this.data.workHours) {
    if(this.data.workHours[x].day == day) return `${this.data.workHours[x].opens_at} to ${this.data.workHours[x].closes_at}`;
  }

  return "closed";
}
👤vpalade

Leave a comment