Tengo datos de vue:
data: { offices: requestData, selectedFloors: [ "3", "4", "5", "10", "11", "12", ], minJobAngle: 0, maxJobAngle: 80, minAreaAngle: 0, maxAreaAngle: 900 }Y necesito usar pisos seleccionados para filtrar filas de tablas. El filtrado funciona bien pero el orden de los pisos seleccionados en el filtro es 10, 11, 12, 3, 4, 5
Tengo esta función en mis métodos.
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; }); }Esto bajo computado
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; },Y este es mi 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>¿Alguna idea de lo que me estoy perdiendo y cómo hago para que estos pisos se muestren así 3,4,5,10,11,12?
Necesitaría convertir sus pisos en números usando Number('3') por ejemplo. Esto hará las comparaciones entre números y no entre cadenas.
Cuando está comparando cadenas, obtendrá clasificación alfabética (ordenación lexicográfica) en la que, por ejemplo, 10 < 2 .
Aquí está la función de clasificación fija:
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; });Para leer más sobre la conversión de tipos, consulte aquí: https://developer.mozilla.org/en-US/docs/Glossary/Type_Conversion
Estás comparando cadenas en lugar de números. Las cadenas 10 , 11 , 12 son inferiores a 2 o 3 . Use parseInt para convertir la cadena antes de comparar.
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; },