Vuetify 服务器端自动完成

Posted 2023-02-23

【中文标题】Vuetify 服务器端自动完成

【英文标题】：Vuetify server side autocomplete

【发布时间】：2021-09-07 09:31:13

【问题描述】：

我需要对 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 包装在其中，但也没有成功。有没有办法做到这一点？

【参考方案1】：

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

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

【讨论】：

很好的答案.. 这很完美：codeply.com/p/BOwzZKhFvY