Vuetify server side autocomplete

Question

I need to an infinite pagination on the Vuetify autocomplete. When I scroll to the end of the menu load a new page of items from the backend.

I tried using the v-intersect directive like so:

<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>

But the onIntersect() function is being called when I click on the autocomplete instead of when I scroll to the appended item. I also tried the v-lazy directive wrapping the appended item div in it which also didn't worked. Is there some way of doing this?

Answer 1

This is expected behaviour for v-intersect 's handler. it is invoked on mount and on intersect. if you want the handler to be invoked only on intersect use the quiet modifier.

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