Как показать определенный блок 'div' столько раз, сколько указывает условие цикла?

Я написал календарь, который показывает события, взятые из файла JSON, в дни когда они должны происходить. И сейчас я пытаюсь сделать детальное отображение информации о событии. У меня все работает нормально, если в одном дне есть одно событие, но есть дни, когда есть два или более событий. На скриншоте я выбрал день, когда у меня есть два события, и бывает так, что отображается только подробная информация о последнем событии, как это сделать, чтобы, если бы я нажал на подробную информацию такого дня с двумя или более событиями, Сначала будет опубликована подробная информация о первом событии, а затем и о втором.

Я хочу, чтобы модальное окно отображалось столько раз, сколько событий в дне, и каждый раз с подробной информацией о новом событии.

Функция detailEvent отвечает за отображение подробной информации о событии.



Полный код на GitHub

<template>
  <div class="all">
    <div class="overflow-div">
      <div class="pagination">
        <div @click="prevPage" class="btn-left"><</div> 
        <p>{{ nameOfOneMonth }} {{ year }}</p>
        <div @click="nextPage" class="btn-right">></div> 
      </div>
 
        <div class="d_nameOfDays">
          <li v-for="day in nameOfDays" class="nameOfDays">{{ day }}</li>
        </div>
        <transition :name="nameOfClass" >
          <div :key="currentPage" class="fade_wrapper">
            <div v-for="(week, i) in getCalendar" class="d_day">
            <li v-for="day in week" 
                class="li_day"
                v-bind:class="{   'currentDay': currentDayOnCalendar(day), 
                                  'longEvent': longEvent(day) }" >
            <img  src="src/assets/question.png" 
                  width="14px" 
                  height="14px" 
                  v-show="addButtonToDay(day)"
                  v-on:click="detailEvent(day)">
            <div class="day" 
                 v-bind:class="{  'grey': isAnotherMonth(i, day), 
                                  'currentDay': currentDayOnCalendar(day), 
                                  'red': weekEndDayFunction(day), 
                                  'longEvent': longEvent(day) }" 
                 v-html="[].concat(day).join('<br>')"></div>
            </li>
          </div>
        </div>
      </transition>
    </div>
    <div v-show="modalWindowDetail" class="underModalWindow">
      <div class="modalWindow">
         <div v-for="(key, name) in detailInformationOfEvent">{{ name }}: {{ key }}</div>  
         <button v-on:click="modalWindowDetail = false">Окей</button>
      </div>
    </div>
  </div> 
</template>
 
<script>
  import json from './Calendar_data.json'
export default {
  data(){
    return{
      currentPage: 0,
      namesOfMonths: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
      nameOfOneMonth: '',
      nameOfDays: ['Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб', 'Вс'],
      date: new Date(),
      isActive: true,
      year: '',
      nameOfClass: '',
      eventsData: json,
      modalWindowDetail: false,
      modalWindowAdd: false,
      memo: '',
      dayWhenAddEvent: Number,
      inputInAddEvent: '',
      detailInformationOfEvent: {}
    }
  },
  computed: {
    getCalendar(){
      return this.buildCalendar();
    }
  },
  mounted(){
    this.year = this.date.getFullYear();
    this.currentPage = this.date.getMonth();
    this.nameOfOneMonth = this.namesOfMonths[this.currentPage];
  },
  methods: {
    detailEvent(dayNumber){
      this.modalWindowDetail = true;
      for(let q = 1; q <= dayNumber.length; q++){
        this.memo = dayNumber[q];
        let arrOfEvents = this.eventsData.events;
        for(let z = 0; z < arrOfEvents.length; z++){
          let memoInJSON = arrOfEvents[z].memo;
          if(this.memo === memoInJSON){
            this.detailInformationOfEvent = {
              'Cобытие': this.memo,
              'Начало события': arrOfEvents[z].starts_at,
              'Конец события': arrOfEvents[z].ends_at
            }
          }
        }
      }
    },
    getYear(){
      this.year = this.date.getFullYear();
    }
};
</script>