I am facing an issue with my table where I am using a custom sort function, but it seems to be getting stuck in a loop.
<v-card>
<v-toolbar flat>
<v-toolbar-title>{{ $t('locations.list.title') }}</v-toolbar-title>
<v-divider class="mx-4" inset vertical></v-divider>
<div>
<v-text-field
append-icon="fa fa-search"
v-model="params.query"
:label="$t('locations.labels.search')"
:disabled="isLoading"
single-line
hide-details
v-debounce:1500="search"
></v-text-field>
</div>
<v-spacer></v-spacer>
<v-btn color="primary" :to="{ name: 'locations:create' }">
{{ $t('locations.labels.add') }}
<v-icon right>fa fa-plus</v-icon>
</v-btn>
</v-toolbar>
<v-data-table
:headers="headers"
:items="locations"
:page.sync="pagination.current_page"
:items-per-page="pagination.per_page"
:loading="isLoading"
hide-default-footer
:multi-sort="true"
:custom-sort="customSort"
@page-count="pageCount = $event"
>
<template v-slot:item.actions="{ item }">
<v-btn icon :to="{ name: 'locations:edit', params: { id: item.id } }">
<v-icon>fa fa-edit</v-icon>
</v-btn>
<v-btn icon @click="requestDeleteConfirmation(item)">
<v-icon>fa fa-trash</v-icon>
</v-btn>
</template>
</v-data-table>
<v-pagination
v-model="pagination.current_page"
:length="pagination.last_page"
@input="search"
></v-pagination>
</v-card>
Below is the method I am using for sorting:
customSort(items, index, isDesc) {
if (index[0]) {
const $sort = index
.reduce((carry, item, index) => {
const name = item;
const order = isDesc[index] ? 'ASC' : 'DESC';
const sort = `${name}:${order}`;
carry.push(sort);
return carry;
}, [])
.join(',');
this.params = { ...this.params, $sort };
console.log('[carry]', $sort);
this.search();
} else {
this.$delete(this.params, '$sort');
}
return items;
},