如何在 Vuetify 中设置日历事件的顺序？答案

【问题标题】：How to set ordering of calendar events in Vuetify?如何在 Vuetify 中设置日历事件的顺序？
【发布时间】：2020-07-06 17:29:52
【问题描述】：

在 Vuetify 中，我使用的是日历，我希望事件的顺序与数组中的 A、B、C、D 相同。但是它会出现在 C、A、B、D 中。

https://codepen.io/sneaky666/pen/rNxdaOQ?editable=true&editors=101%3Dhttps%3A%2F%2Fvuetifyjs.com%2Fen%2Fcomponents%2Fcalendars%2F

<div id="app">
  <v-app id="inspire">
    <div>
      <v-sheet>
        <v-calendar
          v-model="value"
          :events="events"
          :event-more="false" 
        ></v-calendar>
      </v-sheet>
    </div>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    events : [
      {name:"A",start:"2020-07-06",end:"2020-07-06",timed:false},
      {name:"B",start:"2020-07-06",end:"2020-07-06",timed:false},
      {name:"C",start:"2020-07-06",end:"2020-07-08",timed:false},
      {name:"D",start:"2020-07-06",end:"2020-07-06",timed:false}
    ],
    value : ''
  }),
  methods: {
  },
})

如何解决这个问题？

谢谢

【问题讨论】：

标签： javascript vue.js calendar vuetify.js

【解决方案1】：

您可以为每个事件定义一个有序的开始时间，然后使用事件槽仅显示名称。

 computed: {
    orderedEvents(){
      return this.events.map((event, index)=>{
        event.start = event.start + " 00:0" + index
        return event
      })
    }
  },

<v-calendar
      v-model="value"
      :events="orderedEvents"
      :event-more="false">
         <template v-slot:event={event}>
             <span class="px-2"> {{event.name}}</span> 
         </template>
</v-calendar>

【讨论】：

不起作用。实际上，如果日期从同一天开始，它就会起作用。但是我更新了 codepen 中的示例，使 C 在更早的一天开始，它仍然保持在顶部。时间的设置方式也与您的代码生成方式一样。