Tengo una matriz de objetos, que contiene el menú de un restaurante, donde el usuario puede elegir un intervalo de tiempo en el que se puede entregar el menú.
aquí hay un ejemplo de un objeto de menú:
{ 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', }, ], },y así es como los renderizo:
<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>Hasta ahora, todo bien. Ahora quiero agrupar los intervalos de tiempo en "mañana", "tarde" y "noche" según la hora y mostrarlos así:
Morning 06 - 08 10 - 12 Afternoon 12 - 14 14 - 16 16 - 18 Evening 18 - 20 20 - 22¿Cómo puedo lograr eso?
Gracias por adelantado...
Agrupe los espacios del menú por la hora de finalización y luego reprodúzcalos usando dos 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>