javascript - sorting not working for Date field in Vuejs

Question

I need to apply sorting and pagination logic for two tables in a single component in VueJS using stable methods. Currently i am able to do sorting and pagination for a single table using below link.

https://www.raymondcamden.com/2018/02/08/building-table-sorting-and-pagination-in-vuejs

My Queries :

a. Sorting is working fine for single table for string and numeric values.But here date sorting is not working.

b. And if i need to apply two computed array for two tables, its working fine. But like to confirm whether i can use single computed array value to control both tables inside the single component.

Code sample for "date" sorting issue:

Date format : date: "27/01/2021" {Here date,month,year} Here sorting working for first 2 digits only , due to which sorting not working as per the requirement.

sortedCats:function() {
    return this.cats.sort((a,b) => {
        let modifier = 1;
        if(this.currentSortDir === 'desc') modifier = -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) => {
        let start = (this.currentPage-1)*this.pageSize;
        let end = this.currentPage*this.pageSize;
        if(index >= start && index < end) return true;
    });
}

Please help me here .Thanks.

question from:https://stackoverflow.com/questions/66052816/sorting-not-working-for-date-field-in-vuejs

Answer 1

To work with dates, you need to use new Date():

sortedCats:function() {
return this.cats.sort((a,b) => {
    aDate = new Date(a[this.currentSort]);
    bDate = new Date(b[this.currentSort]);
    let modifier = 1;
    if(this.currentSortDir === 'desc') modifier = -1;
    if(aDate < bDate) return -1 * modifier;
    if(aDate > bDate) return 1 * modifier;
    return 0;
}).filter((row, index) => {
    let start = (this.currentPage-1)*this.pageSize;
    let end = this.currentPage*this.pageSize;
    if(index >= start && index < end) return true;
});

}