I have a Vuetify v-autocomplete that I want to know when the user scrolled to its last item, so I can load more items (without him having to type for search):
// component.vue
<template>
<v-autocomplete
ref="myAutocomplete"
v-model="selectedItem"
autocomplete="off"
:items="items"
no-filter
:label="$t('unit')"
rounded
outlined
item-text="name"
return-object
/>
</template>
I don't see any available prop and/or event that could help me do that.
My solution was to listen to scroll events on inner v-automplete's v-menu__content element:
// component.vue
export default {
...,
// at mounted hook we set the listener
mounted() {
const component = this.$refs.myAutocomplete;
component.onScroll = this.onScroll(component);
},
// and our method should look like:
methods: {
onScroll(component) {
// recursively will search for the specified child
const findChildren = (elem, name) => {
if (elem.$el.className.includes(name)) return elem.$el;
let i = 0;
let children;
for (i; !children && i < elem.$children.length; i++) {
children = findChildren(elem.$children[i], name);
}
return children;
}
// searchs for 'v-menu--content' element inside v-autocomplete
const vMenuContent = findChildren(component, 'v-menu__content');
// take its scroll values
const a = vMenuContent.scrollTop;
const b = vMenuContent.scrollHeight;
const c = vMenuContent.clientHeight;
// check if it is 100% scrolled
const isScrolled = (a / (b - c)) === 1;
if (!isScrolled) return
// reached the last item: load more items...
},
},