如何识别 Vuetify 的 v-autocomplete 何时到达最后一个滚动项答案

【问题标题】：How to identify when Vuetify's v-autocomplete reaches last scrolled item如何识别 Vuetify 的 v-autocomplete 何时到达最后一个滚动项
【发布时间】：2021-10-28 17:06:42
【问题描述】：

我有一个 Vuetify v-autocomplete，我想知道用户何时滚动到最后一个项目，这样我就可以加载更多项目（无需他输入搜索内容）：

// 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>

我没有看到任何可用的道具和/或事件可以帮助我做到这一点。

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

我的解决方案是在内部 v-automplete 的 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...
    },
  },

【讨论】：