Tengo un Vuetify v-autocompletar que quiero saber cuándo el usuario se desplazó hasta su último elemento, para poder cargar más elementos (sin que tenga que escribir para buscar):
// 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>No veo ningún accesorio o evento disponible que pueda ayudarme a hacer eso.
Mi solución fue escuchar eventos de desplazamiento en el elemento v-menu__content de v-menu__content :
// 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... }, },