I've encountered an issue where Vue is not honoring the sequence of keys. The initial data I provide to the Vue component as a prop appears as follows:
[
{ id: 1, event_name: "event 1", scheduled_at: "2021-01-01" },
{ id: 2, event_name: "event 2", scheduled_at: "2021-01-01" },
{ id: 3, event_name: "event 3", scheduled_at: "2021-01-05" },
{ id: 4, event_name: "event 4", scheduled_at: "2021-01-05" },
{ id: 5, event_name: "event 5", scheduled_at: "2021-01-02" }
]
Subsequently, I have a calculated prop called groupedEvents that organizes the events by date (using lodash's groupBy function). Here is the resulting output:
{
2021-01-01: [
{ id: 1, event_name: "event 1", scheduled_at: "2021-01-01" },
{ id: 2, event_name: "event 2", scheduled_at: "2021-01-01" },
],
2021-01-02: [
{ id: 5, event_name: "event 5", scheduled_at: "2021-01-02" }
],
2021-01-05: [
{ id: 3, event_name: "event 3", scheduled_at: "2021-01-05" },
{ id: 4, event_name: "event 4", scheduled_at: "2021-01-05" },
]
}
The main issue lies in the fact that when I utilize a v-for loop on groupedEvents, the order of groups gets jumbled or overlooked.
<div v-for="(group, key) in groupedEvents">{{ key }}</div>
The displayed result is:
2021-01-01
2021-01-05
2021-01-02
instead of the desired:
2021-01-01
2021-01-02
2021-01-05
Additional note: ordering function utilized:
let grouped = _.groupBy(this.events, (event) => { return event.scheduled_at })