如何使用后端在 Vuetify 自动完成中创建无限滚动?
How to create infinite scroll in Vuetify autocomplete using backend?
如何在自动完成中检查滚动何时向下?然后通过initialize()
方法上传更多结果?类似于分页但自动完成。
模板:
<v-autocomplete
:items="items"
item-text="name"
item-value="id"
label="Item List"
></v-autocomplete>
脚本:
data: () => ({
items: [],
page: 1
}),
methods: {
initialize() {
return ItemService.getItems(this.page)
.then((response) => {
return response;
})
.catch((error) => {
this.handleError(error, this.errors);
});
}
}
我用过 我有:
<v-autocomplete>
:items="items"
item-text="name"
item-value="id"
label="Item List"
<template v-slot:append-item>
<div v-intersect="endIntersect" />
</template>
</v-autocomplete>
async endIntersect(isIntersecting) {
if (isIntersecting) {
this.page += 1;
let moreItems = await this.initialize();
this.items = [...this.items, ...moreItems];
}
}
如何在自动完成中检查滚动何时向下?然后通过initialize()
方法上传更多结果?类似于分页但自动完成。
模板:
<v-autocomplete
:items="items"
item-text="name"
item-value="id"
label="Item List"
></v-autocomplete>
脚本:
data: () => ({
items: [],
page: 1
}),
methods: {
initialize() {
return ItemService.getItems(this.page)
.then((response) => {
return response;
})
.catch((error) => {
this.handleError(error, this.errors);
});
}
}
我用过
<v-autocomplete>
:items="items"
item-text="name"
item-value="id"
label="Item List"
<template v-slot:append-item>
<div v-intersect="endIntersect" />
</template>
</v-autocomplete>
async endIntersect(isIntersecting) {
if (isIntersecting) {
this.page += 1;
let moreItems = await this.initialize();
this.items = [...this.items, ...moreItems];
}
}