VueJS中对Axios请求获取的月份数据排序的问题

你可以利用已有的monthNames数组作为排序参照，给去重后的月份字符串数组添加排序逻辑，具体步骤如下：

1. 添加通用月份字符串排序方法 #

在Vue组件的methods中新增一个专门处理月份字符串排序的方法，通过映射表快速匹配每个月份的排序位置：

methods: {
  // ... 其他已有方法
  sortMonthStrings(monthStrings) {
    // 创建月份名称到排序位置的映射表
    const monthPositionMap = this.monthNames.reduce((map, item) => {
      map[item.month] = parseInt(item.position, 10);
      return map;
    }, {});
    
    // 基于位置值排序
    return [...monthStrings].sort((a, b) => {
      return monthPositionMap[a] - monthPositionMap[b];
    });
  }
}

2. 修改业务代码整合排序逻辑 #

在处理完月份拆分、去重后，调用上面的排序方法，再赋值给uniquemonths：

// ... 业务逻辑部分
let months = [];
metamonths.forEach((item) => {
  const splitArr = item.split(", ");
  months = months.concat(splitArr);
});

// 去重（用Set更高效）
const uniqueMonthsArr = [...new Set(months)];
// 排序后赋值
this.uniquemonths = this.sortMonthStrings(uniqueMonthsArr);

3. 验证组件展示 #

此时uniquemonths已经是按Jan、Feb...Dec顺序排列的数组，Vue Multiselect组件的:options="uniquemonths"会自动按正确顺序渲染选项。

补充优化 #

• 用Set去重比filter方法性能更优，尤其当数据量较大时；
• 将position转为整数后再做减法排序，避免字符串比较可能出现的问题（比如"10"和"02"字符串比较会认为"10"更小）。

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