[英]Vuetify server side autocomplete
I need to an infinite pagination on the Vuetify autocomplete.我需要对 Vuetify 自动完成进行无限分页。 When I scroll to the end of the menu load a new page of items from the backend.
当我滚动到菜单末尾时,从后端加载一个新的项目页面。
I tried using the v-intersect
directive like so:我尝试使用
v-intersect
指令,如下所示:
<template>
<v-autocomplete
:items="aBunchOfItems"
item-text="theText"
item-value="theValue"
label="AutoComplete Test"
>
<template v-slot:append-item>
<div v-intersect="onIntersect">
Loading more items ...
</div>
</template>
</v-autocomplete>
</template>
<script>
export default {
methods: {
onIntersect () {
console.log('lol')
},
},
}
</script>
But the onIntersect()
function is being called when I click on the autocomplete instead of when I scroll to the appended item.但是当我单击自动完成而不是滚动到附加项目时,会调用
onIntersect()
函数。 I also tried the v-lazy
directive wrapping the appended item div in it which also didn't worked.我还尝试了
v-lazy
指令将附加的项目 div 包裹在其中,但也没有奏效。 Is there some way of doing this?有没有办法做到这一点?
This is expected behaviour for v-intersect
's handler.这是
v-intersect
处理程序的预期行为。 it is invoked on mount and on intersect.它在 mount 和 intersect 时被调用。 if you want the handler to be invoked only on intersect use the
quiet
modifier.如果您希望仅在相交时调用处理程序,请使用
quiet
修饰符。
<div v-intersect.quiet="onIntersect">
Loading more items ...
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.