Well, I have a problem with sorting this table by Date. The sort function as a determinant of what sort we should use - works, but the sort function doesn't work anymore and I don't know why.
html:
<th @click = "sort('data_produktu')" class="date">Data</th>
data:
messages: [],
currentSort:'data_produktu',
currentSortDir:'asc',
methods:
sort: function(s){
if(s === this.currentSort) {
this.currentSortDir = this.currentSortDir==='asc'?'desc':'asc';
}
this.currentSort = s;
console.log(this.messages);
}
computed:
sortedMessages:function() {
return this.messages.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;
});
}
Array(console.log output because Im fetching it from DB):
0: {id_komunikat: '4', data_produktu: '2022-08-12 20:05:30', tresc: 'Example info', typ: '2', status_komunikatu: '1', …}
1: {id_komunikat: '5', data_produktu: '2022-08-12 20:05:36', tresc: 'Example info', typ: '2', status_komunikatu: '1', …}
2: {id_komunikat: '6', data_produktu: '2022-08-12 20:05:39', tresc: 'Example info', typ: '2', status_komunikatu: '1', …}
3: {id_komunikat: '7', data_produktu: '2022-08-12 20:05:47', tresc: 'Example info', typ: '1', status_komunikatu: '1', …}
I see that data_produktu is a date, sorting date can't be sorted, with bigger than > or less than <, but by subtraction timestamps.
Ex:
array.sort(function(a,b){
return new Date(b) - new Date(a);
});
The computed function looks suspicious to me. It probably would cause infinite loop, because you also mutate this.messages in-place by invoking .sort() method. I suggest change it to:
sortedMessages:function() {
// use `.slice()` to clone first
this.messages.slice().sort((a, b) => ...)