How to Fetch when scroll at the bottom ?

[Dimitri-Habruk]

Hi all.

I don't found information about how i can check when scrool at the bottom, for do new fetch ?
for the Options.

Thanks !

[Dimitri-Habruk]

i'm trying this :
<multiselect
@scroll="fetchData"
>
But it's not working

[foggy54]

i'm trying this : <multiselect @scroll="fetchData" > But it's not working

Hello, have you managed to solve your question? I'm looking for solution which allow partial loading of the options for large lists, something similar to Select2.

[lehoaibaokg]

Just an idea, I think we can wrap the vue-multiselect into the custom multiselect component, inside that component we can add scroll event listener into the list, and check whether scrolling to bottom then we will call API with the next offset data

<vue-multiselect
    ref="multiselect"
    :value="value"
    :options="options">
</vue-multiselect>

const listElement = this.$refs.multiselect.$refs.list;
listElement.addEventListener('scroll', () => {
    const isScrolledToBottom = listElement.scrollHeight - listElement.scrollTop === listElement.clientHeight;

    if (isScrolledToBottom) {
        // Call the API and append the next data to the options
    }
});

While calling the API, we can display the afterList slot with the loading spinner, when we have the new data added to options, we will hide this slot

[Dimitri-Habruk]

foggy54

not yet. still waiting on help, from somebody :)