Isih nombor menggunakan Vue

Question

Saya mempunyai data vue:

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

Saya perlu menapis baris meja menggunakan Tingkat Terpilih. Penapisan berfungsi dengan baik tetapi susunan lantai terpilih dalam penapis ialah 10, 11, 12, 3, 4, 5

Saya mempunyai fungsi ini dalam kaedah saya

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

Pengiraan ini tidak mencukupi

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

Ini html saya

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

Ada idea apa yang saya hilang dan cara memaparkan lantai ini sebagai 3, 4, 5, 10, 11, 12?

Answer 1

Sebagai contoh, anda perlu menggunakan Number('3') untuk menukar lantai kepada nombor. Ini akan membandingkan antara nombor, bukan rentetan.

Apabila anda membandingkan rentetan, anda mendapat susunan abjad (urutan leksikografi) seperti 10 < 2.

Ini ialah fungsi isihan tetap:

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 
Untuk mengetahui lebih lanjut tentang penukaran jenis, lihat di sini: https://developer.mozilla.org/en-US/docs/Glossary/Type_Conversion

Answer 2

Anda membandingkan rentetan bukan nombor. Rentetan 10、11、12 低于 2 或 3。在比较之前使用 parseInt Tukar rentetan.

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