Блог

Я создаю динамическое портфолио для себя, используя VueJS. Я создал способ обновлять опыт и упорядочивать его на основе текущих текущих заданий, которые сначала сортируются в порядке возрастания, что означает, что сначала будет отображаться задание с датой начала в мае 2021 года, а затем в марте 2021 года (оба присутствуют). Далее, если я установлю дату окончания задания, оно должно обновить и поместить текущие задания в начало, чего не происходит.

Алгоритм:

 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' amp;amp; 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 — это массив опыта: (Я добавил только необходимую информацию)

 editableExperience = [{period: 'May 2021 - Present'}, {period: 'November 2020 - Present'}, {period: 'January 2021 - March 2021'}, {period: 'March 2018 - July 2020'}]
 

Точная ситуация с проблемой:

1. Установка третьего элемента в present job переводит его в позицию 2, но повторное указание даты окончания не отправляет его снова в позицию 3.
2. Установка последнего элемента в present не выводит его перед отсутствующими заданиями.

Ваша функция сравнения возвращает строку или число, в то время как функция сравнения должна возвращать либо 1, 0, либо -1 в соответствии с документами MDN .

Я внес изменения в ваш код ниже:

 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' amp;amp; 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;
  }
 

Модель представления немного смешана с моделью данных, я бы посоветовал сохранить чистую модель данных, которая содержит исходные значения, она хороша для обработки, подобной сортировке. затем вычисляемое свойство как модель представления, которая зависит от модели данных.

 data: () => ({
  editableExperience: [
    {start: 202105, end: 999999},
    {start: 202011, end: 999999},
    {start: 202101, end: 202103},
    {start: 201803, end: 202107},
  ],
}),
 

тогда сортировка будет выглядеть так:

 this.editableExperience.sort((a,b) => {
  return b['end'] === a['end']? b['start'] - a['start'] : b['end'] - a['end']
})
 

для вашего представления (отображения)

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