Vue中如何按创建日期对无序关联表数据进行排序？

错误原因分析 #

你之前的代码报错regulationDate是未解析变量，核心问题是数据路径错误：你误将tenancyUnits当作对象直接访问regulationDate，但实际上通过axios获取的列表数据tenancyUnits应该是一个数组，每个数组元素才包含regulationDate字段。

可行解决方案 #

1. 修正计算属性的排序逻辑 #

在Vue的计算属性中，对tenancyUnits数组进行排序，同时处理边界情况避免报错：

sortedItems() {
  // 先判断原数组是否有效，避免空值报错
  if (!Array.isArray(this.tenancyUnits)) return [];
  
  // 浅拷贝原数组，避免sort原地修改原数据
  return [...this.tenancyUnits].sort((a, b) => {
    // 用可选链处理可能的字段缺失情况，避免报错
    const dateA = a?.regulationDate?.creationDateTime ? new Date(a.regulationDate.creationDateTime) : new Date(0);
    const dateB = b?.regulationDate?.creationDateTime ? new Date(b.regulationDate.creationDateTime) : new Date(0);
    
    // 降序排序，最新录入的条目排在最前面
    return dateB - dateA;
  });
}

2. 模板中使用排序后的数组 #

在Vue模板里遍历sortedItems，就能展示按creationDateTime排序后的最新条目：

<template>
  <div class="tenancy-list">
    <div v-for="unit in sortedItems" :key="unit.id" class="tenancy-item">
      <p>生效日期：{{ unit.regulationTakesEffectDate }}</p>
      <p>录入时间：{{ unit.regulationDate.creationDateTime }}</p>
    </div>
  </div>
</template>

关键说明 #

• 浅拷贝数组：使用[...this.tenancyUnits]拷贝原数组，因为sort方法是原地排序，会修改原数组，拷贝后能避免污染原始数据。
• 降序排序：通过dateB - dateA实现降序，确保最新的条目排在首位。
• 边界处理：用可选链操作符?.处理可能的字段缺失（比如某些条目没有regulationDate或creationDateTime），避免页面报错。

内容的提问来源于stack exchange，提问作者Cphml444