quasar q-select infinite scroll

Question

How to apply infinite scroll on q-select? I see there is "virtual-scroll" event which return this json,

{index: 11, from: 0, to: 11, direction: 'increase', ref: VueComponent}

But the problem is when you are using mouse and scrolling, it is not updating the index parameter in returned data, and the index is always the position of the last greyed item, but with keyboard it is working as you are always moving the greyed item in selected list.

How to know scroll is near end to trigger fetch data? Should I take another approach.

Answer 1

This is the solution,

<q-select>
    <template v-slot:option="scope">
         <q-infinite-scroll @load="onLoad" :offset="25">
          <q-item v-bind="scope.itemProps" v-on="scope.itemEvents">
          </q-item>
         </q-infinite-scroll>
    </template>
</q-select>