[Vuejs]-Display all items of for loop inside string interpolation Vue JS

by

0👍

Given <p>{{showOpeningHours}}</p>, the showOpeningHours computed property could format the opening hours data into one long string:

get showOpeningHours() {
  const daysOfWeek = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
  const openingHours =
    this.foodMerchant.opening_hours.data
      .map(hours => {
        const timeStr = DateTime.fromObject({
                          hour: hours.startHour,
                          minute: hours.startMinute,
                          zone: this.foodMerchant.timeZone
                        }).toFormat('h:mm a');
        return daysOfWeek[hours.day] + ' ' + timeStr;
      });
  return openingHours.join(' / ');
}

demo 1

Or you could change the computed property into an array, rendered with v-for:

get showOpeningHours() {
  const daysOfWeek = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];
  const openingHours =
    this.foodMerchant.opening_hours.data
      .map(hours => {
        const timeStr = DateTime.fromObject({
                          hour: hours.startHour,
                          minute: hours.startMinute,
                          zone: this.foodMerchant.timeZone
                        }).toFormat('h:mm a');
        return daysOfWeek[hours.day] + ' ' + timeStr;
      });
  return openingHours; // <-- RETURNS ARRAY
}

template:

<ul>
  <li v-for="hours in showOpeningHours" key="hours.day">{{hours}}</li>
</ul>

demo 2

Leave a comment