Vue如何在v-for循环中对项目进行分组

Question

我有一个对象数组，其中包含餐厅的菜单，用户可以在其中选择可以提供菜单的时间段。

这是菜单 object 的示例：

{
  date: '2022-02-10',
  slots: [
     {
       stock: 10,
       start: '06:00',
       end: '08:00',
     },
     {
       stock: 8,
       start: '10:00',
       end: '12:00',
     },
     {
       stock: 3,
       start: '12:00',
       end: '14:00',
     },
     {
       stock: 3,
       start: '14:00',
       end: '16:00',
     },
     {
       stock: 3,
       start: '16:00',
       end: '18:00',
     },
     {
       stock: 20,
       start: '18:00',
       end: '20:00',
     },
     {
       stock: 8,
       start: '20:00',
       end: '22:00',
     },
  ],
},

这是我如何渲染它们：

<div v-for="(slot, index) in slots" :key="index">
   <input type="radio" :id="index" name="slot" />
   <label :for="index">
        {{ slot.start.slice(0, 2) }} - {{ slot.end.slice(0, 2) }}
   </label>
</div>

到目前为止，一切都很好。 现在我想根据时间将时间段分为“早上”、“下午”和“晚上”，并像这样显示：

Morning
06 - 08    10 - 12

Afternoon
12 - 14    14 - 16   16 - 18

Evening
18 - 20   20 - 22

我怎样才能做到这一点？

提前致谢...

Answer 1

按结束时间对菜单槽进行分组，然后使用两个v-for渲染它们：

 Vue.config.devtools = false; Vue.config.productionTip = false; function pushToSlotTime(acc, slotTime, curr) { if (acc[slotTime]) { acc[slotTime].push(curr); } else { acc[slotTime] = []; acc[slotTime].push(curr); }; return acc; } new Vue({ el: '#app', data() { return { menu: { date: '2022-02-10', slots: [{ stock: 10, start: '06:00', end: '08:00', }, { stock: 8, start: '10:00', end: '12:00', }, { stock: 3, start: '12:00', end: '14:00', }, { stock: 3, start: '14:00', end: '16:00', }, { stock: 3, start: '16:00', end: '18:00', }, { stock: 20, start: '18:00', end: '20:00', }, { stock: 8, start: '20:00', end: '22:00', }, ], }, } }, computed: { groupedMenuSlots() { return this.menu.slots.reduce((acc, curr) => { let [end] = curr.end.split(':') if (+end <= 12) { return pushToSlotTime(acc, 'morning', curr) } else if (+end > 12 && +end <= 18) { return pushToSlotTime(acc, 'afternoon', curr) } else { return pushToSlotTime(acc, 'evening', curr) } }, {}) } } })

 <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script> <div id="app" class="container"> <div v-for="(slots,key, index) in groupedMenuSlots":key="index"> <div>{{key}}</div> <span class="slot" v-for="slot in slots"> <input type="radio":id="index" name="slot" /> <label:for="index"> {{ slot.start.slice(0, 2) }} - {{ slot.end.slice(0, 2) }} </label> </span> </div> </div>