Как реализовать сортировку таблицы по нажатию на заголовок столбца?

Question

[sickgang]

Есть таблица с 5 колонками, информация прилетает с api, выводится как массив объектов в таком виде:

Нужно при клике на один из столбцов, сортировать сначала a-z, и потом если опять происходит клик, то в обратном порядке
Не понимаю как сделать так, чтобы все обработать одной функцией, передать в аргумент поле столба на который тыкнул, и там в функции его подставить и уже реализовать сортировку, сделал пока так:

<th scope="col" @click="change">Fullname</th>
            <th scope="col" @click="change">Username</th>
            <th scope="col" @click="change">Company</th>
            <th scope="col" @click="change">E-mail</th>
            <th scope="col" @click="change">State</th>

change () {
                this.items.sort((a, b) => {
                    if (a.fullname > b.fullname) return 1
                    if (a.fullname < b.fullname) return -1
              })
        }

При клике сортируется a-z только по полю fullname, при втором клике понятно что ничего не происходит, как можно это реализовать?

Comments

[Alams Stoyne]

var sort_change = 'asc';
...
change () {
if(sort_change == 'asc'){
                this.items.sort((a, b) => {
                    if (a.fullname > b.fullname) return 1
                    if (a.fullname < b.fullname) return -1
              })
}else{
                this.items.sort((a, b) => {
                    if (a.fullname > b.fullname) return -1
                    if (a.fullname < b.fullname) return 1
              })
}
sort_change = (sort_change == 'asc') ? 'desc' : 'asc';

        }

[0xD34F]

Заранее спасибо за ответ!

Всегда пожалуйста.

[sickgang]

0xD34F, спасибо огромное!

Answer 1

[0xD34F]

Добавьте в компонент два свойства - столбец, по которому надо выполнять сортировку, и направление сортировки.

Сделайте вычисляемое свойство, которое будет представлять отсортированный массив. Текущий столбец - ключ, по которому из элементов массива извлекаются значения для сравнения; результат сравнения умножается на +/- 1, в зависимости от текущего направления сортировки.

Функция, инициирующая сортировку, принимает столбец, по которому надо сортировать, и устанавливает значение соответствующего свойства. В случае, если новый и старый столбцы совпадают, переключайте значение свойства, отвечающего за направление сортировки.

https://jsfiddle.net/qny6cvsr/1/

Answer 2

[Alex]

Не проверял, но по моему достаточно прокидывать в обработчик название поля и уже по нему сортировать
Примерно так:

<th scope="col" @click="change('fullname')">Username</th>
<th scope="col" @click="change('company')">Company</th>

change (field) { // ...

Comments

[sickgang]

Пробовал, не получилось