Vue v-for цикл с подзаголовками дня

Question

Я перестраиваю существующую страницу расписания как приложение Vue.JS и пытаюсь получить что-то вроде следующего DOM.(Я новичок в Vue и видел много примеров циклов v-for, но мне интересно, как даже приблизиться к моим конкретным требованиям цикла.)

<ul class="days">
  <li class="day">
    Feb 14
    <ul class="events">
      <li class="event">Event 1</li>
      <li class="event">Event 2</li>
    </ul>
  </li>
  <li class="day">
    Feb 15
    <ul class="events">
      <li class="event">Event 3</li>
    </ul>
  </li>
</ul>

Мои данные в настоящее времяструктурирована следующим образом:

events: [
  {
    "Name": "Event 1",
    "StartDateTime": "February 14, 2019 08:00:00"
  },
  {
    "Name": "Event 2",
    "StartDateTime": "February 14, 2019 09:00:00"
  },
  {
    "Name": "Event 3",
    "StartDateTime": "February 15, 2019 08:00:00"
  }
]

Если я буду использовать обычный JS для циклического прохождения данных, конвертируем каждый StartDateTime в день, фильтруем результат, чтобы не было дубликатов, сохраняем эти данные как отдельныедни возражают в данных Vue, а затем выполняют какое-то вложенное v-for сначала в дни, а затем в события в течение этого дня?И как бы я сказал, что вложенные события соответствуют текущему дню?Или есть намного лучший способ Vue подойти ко всему этому?Спасибо!

Answer 1

Используйте вычисляемое свойство , чтобы получить структуру данных, которая упрощает итерацию данных вашего события, сгруппированных по дате.В следующем коде используется Array.prototype.reduce() для создания поиска Object, ключом которого является дата, проанализированная из каждого события StartDateTime, а значением является массив событий за соответствующую дату:

computed: {
  eventDates() {
    return this.events.reduce((p,c) => {
      const date = new Date(c.StartDateTime).toDateString();
      p[date] = p[date] || [];
      p[date].push(c);
      return p;
    }, {});
  }
},

Затем в вашем шаблоне используйте v-for с этим Object:

<ul class="days">
  <li class="day" v-for="(events, date) in eventDates">
    {{date}}
    <ul class="events">
      <li class="event" v-for="event in events">{{event.Name}}</li>
    </ul>
  </li>
</ul>

new Vue({
  el: '#app',
  data: () => ({
    events: [
      {
        "Name": "Event 1",
        "StartDateTime": "February 14, 2019 08:00:00"
      },
      {
        "Name": "Event 2",
        "StartDateTime": "February 14, 2019 09:00:00"
      },
      {
        "Name": "Event 3",
        "StartDateTime": "February 15, 2019 08:00:00"
      }
    ]
  }),
  computed: {
    eventDates() {
      return this.events.reduce((p,c) => {
        const date = new Date(c.StartDateTime).toDateString();
        p[date] = p[date] || [];
        p[date].push(c);
        return p;
      }, {});
    },
  }
})

<script src="https://unpkg.com/vue@2.6.5/dist/vue.min.js"></script>

<div id="app">
  <ul class="days">
    <li class="day" v-for="(events, date) in eventDates">
      {{date}}
      <ul class="events">
        <li class="event" v-for="event in events">{{event.Name}}</li>
      </ul>
    </li>
  </ul>
</div>