使用Vue对数字进行排序
P粉398117857
P粉398117857 2024-03-26 18:07:09
[Vue.js讨论组]

我有vue数据:

data: {
          offices: requestData,
          selectedFloors: [
            "3",
            "4",
            "5",
            "10",
            "11",
            "12",
          ],
          minJobAngle: 0,
          maxJobAngle: 80,
          minAreaAngle: 0,
          maxAreaAngle: 900
        }

我需要使用选定的楼层来过滤表格行。过滤工作正常,但过滤器中选定楼层的顺序为 10, 11, 12, 3, 4, 5

我的方法中有这个函数

getFilteredOffices() {
            const areaMin = this.sliderAreaMin;
            const areaMax = this.sliderAreaMax;
            const jobsMin = this.sliderJobMin;
            const jobsMax = this.sliderJobMax;
            const floors = this.selectedFloors;
            return this.offices.filter(function (item) {

              if (item.acf.suurus < areaMin || item.acf.suurus > areaMax) {
                return false;
              }
              if (item.acf.tookohad < jobsMin || item.acf.tookohad > jobsMax) {
                return false;
              }
              if (!floors.includes(item.acf.floor)) {
                return false;
              }
              return true;
            });
          }

这个计算不足

getAvailableFloors() {
            const set = new Set();

            const sorted = this.offices.sort((a, b) => {
              if (a.acf.floor > b.acf.floor) {
                return 1;
              }
              if (a.acf.floor < b.acf.floor) {
                return -1;
              }
              return 0;
            });

            sorted.forEach((office) => {
              set.add(office.acf.floor);
            });

            return set;
          },

这是我的 html

知道我缺少什么以及如何将这些楼层显示为 3、4、5、10、11、12?

P粉398117857
P粉398117857

全部回复(1)
P粉182218860

您正在比较字符串而不是数字。字符串 101112 低于 23。在比较之前使用 parseInt 转换字符串。

getAvailableFloors() {
  const set = new Set();

  const sorted = this.offices.sort((a, b) => {
    if (parseInt(a.acf.floor) > parseInt(b.acf.floor)) {
      return 1;
    }
    if (parseInt(a.acf.floor)  {
    set.add(office.acf.floor);
  });

  return set;
},
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号