使用Vue对数字进行排序

Question

我有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

<label :class="['checkbox-label floor' + item]" v-for="item in this.getAvailableFloors">
   <input type="checkbox" name="floor" :value="item" v-model="selectedFloors"> @{{ item }}
   <span class="checkmark"></span>
</label>

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

Answer 1

例如，您需要使用 Number('3') 将楼层转换为数字。这将在数​​字之间进行比较，而不是在字符串之间进行比较。

当您比较字符串时，您将得到字母顺序排序（字典顺序），例如 10 < 2。

这是固定排序函数：

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

      return 0;
 });

要了解有关类型转换的更多信息，请参阅此处：https://developer. mozilla.org/en-US/docs/Glossary/Type_Conversion

Answer 2

您正在比较字符串而不是数字。字符串 10、11、12 低于 2 或 3。在比较之前使用 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) < parseInt(b.acf.floor)) {
      return -1;
    }
    return 0;
  });

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

  return set;
},