Сортировка данных Vue + laravel (оптимизация метода)

Всех приветствую, столкнулся с проблемой сортировки данных во Vue компоненте. А именно не знаю как грамотно отсортировать.

Мой scope

    public function scopeSortByFields($query,array $fields)
    {
//      $q->orderBy('created_at', $this->isCorrectSort($value) ? $value : 'desc');
        $query->when(Arr::get($fields, 'price'), function ($q, $value) {
            $q->orderBy('price', $this->isCorrectSort($value) ? $value : 'desc');
        });

        $query->when(Arr::get($fields, 'created_at'), function ($q, $value) {
            $q->orderBy('created_at', $this->isCorrectSort($value) ? $value : 'desc');
        });
    }

    /**
     * @param string $direction
     * @return bool
     */
    private function isCorrectSort(string $direction)
    {
        return in_array($direction, ['asc', 'desc']);
    }

Мой vue компонент

<select name="" id="" v-model="statBy" @change="sortChanged" class="form-control">
    <option value="0">Выберите тип сортировки</option>
    <option value="1">Сортировка по дате &#8595;</option>
    <option value="2">Сортировка по цене &#8595;</option>
    <option value="3">Сортировка по дате &#8593;</option>
    <option value="4">Сортировка по цене &#8593;</option>
</select>

    data:()=>{
        return{
            data:[],
            sort: {
                sortDesc:false,
                sortBy:''
            },
            statBy:0,
        }
    },


        getData(page = 1) {
            let sort = this.sort.sortBy ? `&sort[${this.sort.sortBy}]=${this.sort.sortDesc ? 'desc' : 'asc'}` : '';
            axios.get(`/api/V1/advert?page=${page}` + sort)
                .then(res => {
                    this.data = res.data
                    console.log(res.data.data)
                })
                .catch(error => {
                    console.log(error);
                })
        },
        sortChanged()
        {
            if(this.statBy == 1){
                this.sort.sortBy = 'created_at'
                this.sort.sortDesc = true
                this.getData()
            }
            if(this.statBy == 2){
                this.sort.sortBy = 'price'
                this.sort.sortDesc = true
                this.getData()
            }
            if(this.statBy == 3){
                this.sort.sortBy = 'created_at'
                this.sort.sortDesc = false
                this.getData()
            }
            if(this.statBy == 4){
                this.sort.sortBy = 'price'
                this.sort.sortDesc = false
                this.getData()
            }
        }

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


Ответы (0 шт):