Javascript 自定义排序输入<;v-数据表>;保持循环
我有一个表,我做了一个Javascript 自定义排序输入<;v-数据表>;保持循环,javascript,vue.js,vuejs2,vuetify.js,Javascript,Vue.js,Vuejs2,Vuetify.js,我有一个表,我做了一个自定义排序,但由于某种原因,该方法停留在一个循环中 <v-card> <v-toolbar flat> <v-toolbar-title>{{ $t('locations.list.title') }}</v-toolbar-title> <v-divider class="mx-4" inset vertical></v-divider>
自定义排序
,但由于某种原因,该方法停留在一个循环中
<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>
我怀疑
customSort()
触发search()
和search()
触发customSort()
存在循环问题
如果不是,我的下一个猜测是它与
v-data-table
有关。你能给我们更多关于那个部件的信息吗?它是来自库还是您自己编写的?19/5000我定义了该方法,因为我必须将筛选信息发送到API中的方法,但我不知道为什么该方法停留在无限循环中,我尝试删除搜索()
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;
},