Vue3中sortedArray排序后无法正确更新问题求助

核心问题 #

1. sortBy函数仅内部计算排序结果，未更新响应式变量sortCriteria和sortOrder，导致依赖这两个变量的sortedArray计算属性无法触发更新。
2. 当前为单字段排序逻辑，不符合「结束日期→开始日期→站点名称」的多优先级排序需求。
3. 初始sortCriteria为空字符串，首次渲染排序无效；日期字段以字符串形式存储，直接排序可能出现逻辑错误。

修复步骤 #

1. 调整响应式变量类型与初始值 #

将sortCriteria改为数组类型，默认设置为目标排序优先级：

const sortOrder = ref<'asc' | 'desc'>('asc');
// 默认按结束日期、开始日期、站点名称排序
const sortCriteria = ref<SortCriteria[]>([SortCriteria.END_DATE, SortCriteria.START_DATE, SortCriteria.STATION]);

2. 修复sortBy函数，更新响应式状态 #

修改点击表头的逻辑，切换主排序字段或排序方向：

const sortBy = (criteria: SortCriteria) => {
  // 若当前主排序字段为点击项，切换排序方向
  if (sortCriteria.value[0] === criteria) {
    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc';
  } else {
    // 否则设置新的主排序字段，其余字段保持优先级
    sortOrder.value = 'asc';
    switch(criteria) {
      case SortCriteria.END_DATE:
        sortCriteria.value = [SortCriteria.END_DATE, SortCriteria.START_DATE, SortCriteria.STATION];
        break;
      case SortCriteria.START_DATE:
        sortCriteria.value = [SortCriteria.START_DATE, SortCriteria.END_DATE, SortCriteria.STATION];
        break;
      case SortCriteria.STATION:
        sortCriteria.value = [SortCriteria.STATION, SortCriteria.END_DATE, SortCriteria.START_DATE];
        break;
    }
  }
};

3. 优化sortedArray计算属性，支持多字段排序 #

调整排序逻辑，确保日期排序准确，主字段使用当前排序方向，其余字段默认升序：

const sortedArray = computed(() => {
  // 为每个排序字段匹配排序方向，主字段用当前sortOrder，其余升序
  const sortOrders = sortCriteria.value.map((_, index) => index === 0 ? sortOrder.value : 'asc');
  
  // 转换日期为时间戳，避免字符串排序误差
  const formattedWorks = currentStationWorks.value.map(item => ({
    ...item,
    startDate: item.startDate ? Date.parse(item.startDate) : -Infinity,
    endDate: item.endDate ? Date.parse(item.endDate) : Infinity
  }));

  // 排序后转换回原始日期字符串，不影响渲染
  return orderBy(formattedWorks, sortCriteria.value, sortOrders).map(item => ({
    ...item,
    startDate: item.startDate !== -Infinity ? new Date(item.startDate).toISOString().split('T')[0] : null,
    endDate: item.endDate !== Infinity ? new Date(item.endDate).toISOString().split('T')[0] : null
  }));
});

4. 可选：添加排序状态标识（优化体验） #

在表头添加箭头显示当前排序方向：

<span class="col-span-2" @click="sortBy(SortCriteria.STATION)">
  Station
  <span v-if="sortCriteria.value[0] === SortCriteria.STATION" class="ml-1">
    {{ sortOrder.value === 'asc' ? '↑' : '↓' }}
  </span>
</span>
<span class="col-span-2 lg:col-span-1" @click="sortBy(SortCriteria.START_DATE)">
  Startdatum
  <span v-if="sortCriteria.value[0] === SortCriteria.START_DATE" class="ml-1">
    {{ sortOrder.value === 'asc' ? '↑' : '↓' }}
  </span>
</span>
<span class="col-span-2 lg:col-span-1" @click="sortBy(SortCriteria.END_DATE)">
  Einddatum
  <span v-if="sortCriteria.value[0] === SortCriteria.END_DATE" class="ml-1">
    {{ sortOrder.value === 'asc' ? '↑' : '↓' }}
  </span>
</span>

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