Как заставить функцию возвращать себя несколько раз в зависимости от условия?

Question

[Иван Иванов]

Добрый день, подскажите пожалуйста. Я написал календарь, и у него есть функция для отображения событий, которые взяты из файла json, если даты в календаре и файле json сходятся. Теперь я хочу сделать подробное отображение события, когда я нажимаю на значок вопросительного знака. И у меня все отлично работает, кроме одного, когда один день содержит несколько событий одновременно, тогда срабатывает детальное отображение только последнего события. Предположим, у дня есть 2 события, затем детальное отображение работает только для второго события, а первое не отображается. Хотя если сделать вывод событий в консоли, то все события отображаются. Я хочу, чтобы модальное окно отображалось два раза, если событий два: первый раз с первым событием, потом я должен нажать на кнопку в модальном окне, и появляется второй раз модальное окно с детальным отображением второго события.

Это я нажал на третье число, в котором два события: 'Самолёт домой' и 'Конференция', и сработал вывод модального окна с детальной информацией только последнего события.


Полный код на 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>

Answer 1

[Антон Р.]

Первое что приходит в голову - обернуть в цикл for и проверять счетчик return-ов.