Vue中楼层字符串按数字大小正序排序显示问题求解

问题根因 #

你遇到的排序问题本质是字符串字典序和数字排序规则的差异：

• 你的floor字段是字符串类型，字符串排序默认逐位比较ASCII码，"10"的首字符是1，ASCII码小于"3"的首字符3，所以会出现10、11、12排在3、4、5前面的问题
• 另外你直接对this.offices调用sort方法，sort是原地排序，会直接修改原data里的offices数组，可能引发其他关联逻辑异常
• 直接返回Set虽然现代浏览器会保留插入顺序，但转成数组返回兼容性更好，也更符合Vue列表渲染的最佳实践

修复方案 #

修改getAvailableFloors计算属性即可：

getAvailableFloors() {
  // 1. 先拷贝原数组，避免原地排序修改原始数据
  const copiedOffices = [...this.offices];
  // 2. 把floor转成数字后再做大小比较，实现数字升序
  const sortedOffices = copiedOffices.sort((a, b) => {
    return Number(a.acf.floor) - Number(b.acf.floor);
  });
  // 3. 去重后转成数组返回
  return Array.from(new Set(sortedOffices.map(item => item.acf.floor)));
}

修改后不需要改动HTML代码，渲染出来的楼层顺序就会是3、4、5、10、11、12，且不会影响原有的复选框绑定逻辑，v-model匹配规则完全和之前一致。

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