如何在vuejs中使用v-for排序

Question

如何使用数据进行排序？

我想使用

对我的数据进行排序

-start_at -结束于

例如；

data: [
  {
    start_at: '08:00',
    end_at: '09:00',
  },
  {
    start_at: '07:00',
    end_at: '08:00',
  },
  {
    start_at: '06:00',
    end_at: '07:00',
  },
...
],

如何按从最低开始时间（即 06:00 将是第一个）到最高开始时间的顺序对这些数据进行排序？

谢谢你们！！

Answer 1

使用计算属性

<template>
  ...
  <div v-for="time in sortedTime">
  </div>
  ...
</template>

<script>
export default {
  data() {
    return {
      time: [],
    }
  },

  computed: {
    sortedTime() {
      return [...this.time].sort((a,b) => ...)
    }
  }
}
</script>

文档：https://v2.vuejs.org/v2/guide/compulated.html#Basic-Example

Answer 2

编辑：只有当您也使用 vuetify 时，这才有效。

如果您使用

v-data-table

，则应使用

custom-sort

属性：https://vuetifyjs.com/en/api/v-data-table/#props-custom-sort

这是一个例子：

模板：

<v-data-table
    :items="lstActions"
    :headers="headers"
    :search="search"
    :custom-sort="doCustomSort"
>

脚本：

public doCustomSort(items: any, index: string[], isDescending: boolean[]) {
    if (index) {
        items.sort((a: any, b: any) => {                
            if (['creationDate', 'modificationdate'].indexOf(index[0]) !== -1) {
                if (isDescending[0]) {
                    return b.informations[index[0]] < a.informations[index[0]] ? -1 : 1;
                }
                return a.informations[index[0]] < b.informations[index[0]] ? -1 : 1;
            }
        });
    }
    return items;
}