How to create infinite scroll in Vuetify Autocomplete component?

Question

I have a page with Vuetify Autocomplete component, and REST API backend with '/vendors' method. This method takes limit , page and name parameters and returns JSON with id and name fields.

I made some code with lazy list load on user input event. But now I want to add the ability to load this list on user scroll event .

For example, by default there is a list of 100 vendors. User scrolled this list until the end, then "some event" is called and loads next 100 of vendors. Then user keeps scrolling and the action is repeated.

Is it possible to made this with Vuetify Autocomplete component, or should i use another library?

Example code of current component is shown below:

<template>
  <v-autocomplete
          :items="vendors"
          v-model="selectedVendorId"
          item-text="name"
          item-value="id"
          label="Select a vendor"
          @input.native="getVendorsFromApi"
  ></v-autocomplete>
</template>

<script>
  export default {
    data () {
      return {
        page: 0,
        limit: 100,
        selectedVendorId: null,
        vendors: [],
        loading: true
      }
    },
    created: function (){
      this.getVendorsFromApi();
    },
    methods: {
      getVendorsFromApi (event) {
        return new Promise(() => {
          this.$axios.get(this.$backendLink 
                  + '/vendors?limit=' + this.limit 
                  + '&page=' + this.page 
                  + '&name=' + (event ? event.target.value : ''))
            .then(response => {
              this.vendors = response.data;
            })
        })
      }
    }
  }
</script>

Answer 1

Looks like it's not possible with default v-autocomplete component (at least in vuetify 1.5.16 or lower). The component that provides the most similar functionality is VueInfiniteAutocomplete .

But keep in mind that in this case there may be problems with styles, validation, etc.

There is an example with this library.

<template>
    <div>
    <vue-infinite-autocomplete
      :data-source="getAsyncOptions"
      :fetch-size="limit"
      v-on:select="handleOnSelect"
      :value="autocompleteViewValue"
    >
    </vue-infinite-autocomplete>
  </div>
</template>
<script>
  export default {
    data () {
      return {
          selectedVendorId : null,
          limit: 100,
          autocompleteViewValue: null
      }
    },
    methods: {
        getAsyncOptions(text, page, fetchSize) {
            return new Promise((resolve, reject) => {
                resolve(
                    this.$axios.get(this.$backendLink
                        + '/vendors?limit=' + fetchSize
                        + '&page=' + page
                        + '&name=' + text)
                        .then(response => {
                            //Response MUST contain 'id' and 'text' fields, and nothing else.
                            //If there are other fields, you should remove it here
                            //and create 'id' and 'text' fields in response JSON by yourself
                            return response.data;
                        })
                )
            });
        },

        handleOnSelect(selectedItem) {
            this.autocompleteViewValue = selectedItem.text;
            this.selectedVendorId = selectedItem.id;
        }
    }
  }
</script>

PS: If you just want to use v-autocomplete component with server-side pagination, you could create a "Load more..." button using append-item slot, as suggested in this issue .