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?
例如,您需要使用
Number('3')
将楼层转换为数字。这将在数字之间进行比较,而不是在字符串之间进行比较。当您比较字符串时,您将得到字母顺序排序(字典顺序),例如
10 < 2
。这是固定排序函数:
您正在比较字符串而不是数字。字符串
10
、11
、12
低于2
或3
。在比较之前使用parseInt
转换字符串。