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

Question

如何在自动完成中检查滚动何时向下？然后通过方法上传更多结果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);
        });
    }
}

标签： javascriptvue.jsscrollautocompletevuetify.js

Answer 1

我用了这个答案，我有它：

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