Trier les nombres à l'aide de Vue

Question

J'ai des données de vue :

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

Je dois filtrer les lignes du tableau en utilisant Étages sélectionnés. Le filtrage fonctionne bien mais l'ordre des étages sélectionnés dans le filtre est 10, 11, 12, 3, 4, 5

J'ai cette fonction dans ma méthode

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

Ce calcul est insuffisant

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

C'est mon 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>

Une idée de ce qui me manque et comment afficher ces étages sous la forme 3, 4, 5, 10, 11, 12 ?

Answer 1

Par exemple, vous devez utiliser Number('3') pour convertir les étages en nombres. Cela comparera les nombres, pas les chaînes.

Lorsque vous comparez des chaînes, vous obtenez un ordre alphabétique (ordre lexicographique) comme 10 < 2.

C'est la fonction de tri fixe :

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

Pour en savoir plus sur la conversion de type, voir ici : https://developer.mozilla.org/en-US/docs/Glossary/Type_Conversion

Answer 2

Vous comparez des chaînes et non des nombres. String 10、11、12 低于 2 或 3。在比较之前使用 parseInt Convertit une chaîne.

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