Vue sorting with empty cells resulting in different results

Question

I have a table created that sorts depending on asc and desc order. It works fine when the cells aren't empty, but when it is empty the results change every time you switch between ascending and descending.

Here's my sorting code:

methods:{
    sort:function(filter) {
      //if filter == current sort, reverse
      if(filter === this.currentSort) {
        this.currentSortDir = this.currentSortDir==='asc'?'desc':'asc';
      }
      this.currentSort = filter;
    },

And the computed:

  computed:{
    sortedPeople:function() { //sort by current sorting direction
       return this.people.sort((a,b) => {

        let modifier = 1;
        if(this.currentSortDir === 'desc') modifier = -1;

        if(a[this.currentSort] == null || b[this.currentSort] == null){
            return -1;
        }

        if(a[this.currentSort] <= b[this.currentSort]){ 

            return -1 * modifier;
        }
        if(a[this.currentSort] > b[this.currentSort]) {

            return 1 * modifier; 
        }
        return 0;
      }).filter((row, index) => { //limit view and not repeat due to pagination
        let start = (this.currentPage-1)*this.pageSize;
        let end = this.currentPage*this.pageSize;
        if(index >= start && index < end) return true;
      });
    }
    }

I tried to get the empty cells to be sorted to the end but my method isn't working 100%, and I don't really understand why they'd change between switches.

Edit: I adjusted my code so now that they all are sorted together, however they're sorted before "a" at the beginning, rather than the end and I'm unsure of how to sort it to the end.

sortedPeople:function() { //sort by current sorting direction
   return this.people.sort((a,b) => {

    let modifier = 1;
    if(this.currentSortDir === 'desc') modifier = -1;

    if(a[this.currentSort] == null){ //CHANGED CODE 
        a[this.currentSort] = "";
    } else if (b[this.currentSort] == null){
        b[this.currentSort] = "";
    }

    if(a[this.currentSort] < b[this.currentSort]){ 

        return -1 * modifier;
    }

    if(a[this.currentSort] > b[this.currentSort]) {

        return 1 * modifier; 
    }
    return 0;
  }).filter((row, index) => { //limit view and not repeat due to pagination
    let start = (this.currentPage-1)*this.pageSize;
    let end = this.currentPage*this.pageSize;
    if(index >= start && index < end) return true;
  });
}

Answer 1

You need to explicitly check for empty (or null ) strings without considering the sort direction; something like the following

.sort((a,b) => {
    const aValue = a[this.currentSort];
    const bValue = b[this.currentSort];

    if (aValue === bValue) return 0;

    if (!aValue) return 1;
    if (!bValue) return -1;

    let direction = (aValue < bValue) ? -1 : 1;
    if (this.currentSortDir === 'desc') direction *= -1;
    return direction;
})