Sortieren Sie Zahlen mit Vue

Question

Ich habe Vue-Daten:

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

Ich muss Tabellenzeilen mithilfe von Ausgewählte Etagen filtern. Die Filterung funktioniert einwandfrei, aber die Reihenfolge der ausgewählten Etagen im Filter ist 10, 11, 12, 3, 4, 5

Ich habe diese Funktion in meiner Methode

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;
            });
          }

Diese Berechnung ist unzureichend

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;
          },

Das ist mein 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>

Irgendeine Idee, was mir fehlt und wie ich diese Etagen als 3, 4, 5, 10, 11, 12 anzeigen kann?

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 
要了解有关类型转换的更多信息，请参阅此处：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)  {
    set.add(office.acf.floor);
  });

  return set;
},