javascript - Vue.js:v-for 超过对象会导致键的顺序错误

Question

我遇到了 Vue 不尊重键顺序的问题。 我作为 prop 传递给 vue 组件的初始数据如下所示:

[
  { 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" }
]

然后我有一个compated prop groupedEvents，它按日期对事件进行分组(使用lodash groupBy)。 输出如下:

{
  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" },
  ]
}

问题:当我对 groupedEvents 执行 v-for 时，组的顺序错误/被忽略。

<div v-for="(group, key) in groupedEvents">{{ key }}</div>

输出为

2021-01-01
2021-01-05
2021-01-02

而不是

2021-01-01
2021-01-02
2021-01-05

Ps:排序函数:

let grouped = _.groupBy(this.events, (event) => { return event.scheduled_at })

Answer 1

您可以迭代 groupedEvents 的 sorted 键，它也可以是使用自定义排序技术的另一个计算属性:

const childcomponent = Vue.component('childcomponent', {
  template: '#childcomponent',
  props: ['events'],
  computed: {
    groupedEvents() {
      return _.groupBy(this.events, 'scheduled_at');
    }
  }
});

new Vue({
  el:"#app",
  components: { childcomponent },
  data: () => ({
    events: [
      {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"}
    ]
  })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js" integrity="sha512-90vH1Z83AJY9DmlWa8WkjkV79yfS2n2Oxhsi2dZbIv0nC4E6m5AbH8Nh156kkM7JePmqD6tcZsfad1ueoaovww==" crossorigin="anonymous"></script>

<template id="childcomponent">
  <ul>
    <li v-for="key in Object.keys(groupedEvents).sort()">
      {{ key }}: {{ groupedEvents[key] }}
    </li>
  </ul>
</template>

<div id="app"><childcomponent :events="events"/></div>