Vue data contains:
data: {
offices: requestData,
selectedFloors: [
"3",
"4",
"5",
"10",
"11",
"12",
],
minJobAngle: 0,
maxJobAngle: 80,
minAreaAngle: 0,
maxAreaAngle: 900
}
The challenge is to filter table rows using the selected floors. Despite successful filtering, the selected floors are not in the desired order which should be 3, 4, 5, 10, 11, 12.
In the methods section, there is a function called:
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;
});
}
In the computed section:
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;
},
The HTML code being used:
<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>
Is anything missing here? How can we display these floors as 3, 4, 5, 10, 11, 12?