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

Question

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

Я написал календарь, который показывает события, взятые из файла 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>

Answer 1

[Михаил]

Модалка:
День (дата)
События (список)

И сохранять эти события как массив а не объект (detailInformationOfEvent), и выводить массив как список

Comments

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

Спасибо за совет.

Answer 2

[0xD34F]

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

То есть, на день назначено десять событий, пользователь случайно ткнулся в этот день, и чтобы продолжить работу, ему надо будет десять окон прокликать? Круто. Предусмотрите хотя бы возможность закрыть сразу всё.

Вместо свойства detailInformationOfEvent сделайте detailInformationOfEvents (то же самое, но во множественном числе) - массив. Само свойство detailInformationOfEvent станет вычисляемым:

computed: {
  detailInformationOfEvent() {
    return this.detailInformationOfEvents[0];
  },
  ...

Когда в detailEvent собираете события для показа в окне - вместо присваивания будет добавление в массив:

this.detailInformationOfEvents.push({
  ...
});

Условие показа окна - вырезаете modalWindowDetail, вместо него будет detailInformationOfEvent (т.е., пока в массиве событий что-то есть - окно показывается):

v-show="detailInformationOfEvent"

Клик по кнопке "Окей" - вместо присваивания будет удаление нулевого элемента массива событий:

detailInformationOfEvents.shift()

Comments

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

Спасибо, я даже и не подумал про 10 событий)