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處理程序的預期行為。 它在 mount 和 intersect 時被調用。 如果您希望僅在相交時調用處理程序，請使用quiet修飾符。

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