Vuetify 服务器端自动完成

Question

我需要在 Vuetify 自动完成上无限分页。当我滚动到 菜单的末尾时 从后端加载新的项目页面。

我试过像这样使用 v-intersect 指令：

<template>
  <v-autocomplete 
    :items="aBunchOfItems" 
    item-text="theText" 
    item-value="theValue" 
    label="AutoComplete Test"
  >
    <template v-slot:append-item>
      <div v-intersect="onIntersect">
        Loading more items ...
      </div>
    </template>
  </v-autocomplete>
</template>

<script>
  export default {
    methods: {
      onIntersect () {
        console.log('lol')
      },
    },
  }
</script>

但是 onIntersect() 函数是在我单击自动完成时调用的，而不是在我滚动到附加项目时调用的。我还尝试了 v-lazy 指令将附加项 div 包装在其中，但也没有用。有什么方法可以做到这一点吗？

Answer 1

这是 v-intersect 处理程序的预期行为。它在挂载和相交时被调用。如果您希望仅在相交时调用处理程序，请使用 quiet 修饰符。

  <div v-intersect.quiet="onIntersect">
     Loading more items ...
  </div>

Vuetify 服务器端自动完成

Vuetify server side autocomplete

javascript

vue.js

vue-component

vuetify.js