如何使用后端在 Vuetify 自动完成中创建无限滚动？答案

【问题标题】：How to create infinite scroll in Vuetify autocomplete using backend?如何使用后端在 Vuetify 自动完成中创建无限滚动？
【发布时间】：2021-08-28 12:45:46
【问题描述】：

如何在自动完成中检查滚动何时向下？然后通过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);
        });
    }
}

【问题讨论】：

vuetify v-autocomplete 没有内置功能。但可能this answer 会帮你解决问题

标签： javascript vue.js scroll autocomplete vuetify.js

【解决方案1】：

我使用了this answer，我拥有它：

<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];
      }
    }

【讨论】：