Estoy haciendo una cartera dinámica para mí usando VueJS. Creé una forma de actualizar las experiencias y ordenarlas en función de los trabajos actualmente en curso que se muestran primero ordenados en orden ascendente, lo que significa que un trabajo con fecha de inicio en mayo de 2021 se mostrará primero y luego en marzo de 2021 (ambos presentes). A continuación, si configuro una fecha de finalización para el trabajo, debería actualizarse y colocar los trabajos actuales al frente, lo que no sucede.
Algoritmo:
newExp() { this.editableExperience.sort((a,b) => { a = a.period.split(' - '); b = b.period.split(' - '); let aStartDate = a[0]; let aEndDate = a[1]; let bStartDate = b[0]; let bEndDate = b[1]; if (aEndDate == 'Present' && bEndDate == 'Present') { return new Date(bStartDate) - new Date(aStartDate); } else if (aEndDate == 'Present') { return a; } else if (bEndDate == 'Present') { return b; } else { return new Date(bStartDate) - new Date(aStartDate); } }) this.experience = this.editableExperience; }editableExperience es una variedad de experiencias: (He agregado solo la información requerida)
editableExperience = [{period: 'May 2021 - Present'}, {period: 'November 2020 - Present'}, {period: 'January 2021 - March 2021'}, {period: 'March 2018 - July 2020'}]Situación exacta del problema:
Su función de comparación devuelve una cadena o un número, mientras que la función de comparación debe devolver 1, 0 o -1 según los documentos de MDN .
He realizado cambios en su código a continuación:
newExp() { this.editableExperience.sort((a,b) => { a = a.period.split(' - '); b = b.period.split(' - '); let aStartDate = a[0]; let aEndDate = a[1]; let bStartDate = b[0]; let bEndDate = b[1]; if (aEndDate == 'Present' && bEndDate == 'Present') { return (new Date(bStartDate) - new Date(aStartDate)) > 1 ? 1 : -1; } else if (aEndDate == 'Present') { return -1; } else if (bEndDate == 'Present') { return 1; } else { return (new Date(bStartDate) - new Date(aStartDate)) > 1 ? 1 : -1; } }); this.experience = this.editableExperience; }El modelo de vista está un poco mezclado con el modelo de datos, sugeriría mantener un modelo de datos limpio que contenga los valores originales, es bueno para procesar como ordenar. luego una propiedad calculada como modelo de vista que depende del modelo de datos.
data: () => ({ editableExperience: [ {start: 202105, end: 999999}, {start: 202011, end: 999999}, {start: 202101, end: 202103}, {start: 201803, end: 202107}, ], }),entonces la clasificación se verá así:
this.editableExperience.sort((a,b) => { return b['end'] === a['end']? b['start'] - a['start'] : b['end'] - a['end'] })para su vista (pantalla)
computed: { viewExperiences() { const ve = [] for(const e of this.editableExperience) { ve.push(this.getExperienceDisplay(e)) } return ve } }, methods: { formatExperienceDate(dateInt) { if(dateInt === 999999) return 'Present' const dateStr = dateInt.toString() const date = new Date(dateStr.substring(0, 4) + '-' + dateStr.substring(4, 6)) return date.toLocaleDateString("en-US", {year: 'numeric', month: 'long'}) }, getExperienceDisplay(exp) { const startDate = this.formatExperienceDate(exp['start']) const endDate = this.formatExperienceDate(exp['end']) return `${startDate} - ${endDate}` }, }