multiselect
multiselect copied to clipboard
vueform
Infinite scrolling with pagination from API
Hello there,
I am currently trying to implement this component in our application but i am having an issue with loading paginated results.
Our backend is laravel and we are using the standard Laravel resources with pagination. My issue is that i haven't found a way to know when the Multiselect has reached to the end of the current results in order for me to call the api again with the incremented page size.
Is there any way to implement this with this package?
Thanks :)
It's a bit tricky but you can achieve what you want by grabbing the .multiselect-options and after that you have access to the list items and you can use Intersection observer or use the container and add an scroll event listener
you can simply use the slot afterlist as item to observe. I'm on an old version actually so that's why I need to make some trick.
@egerb hi, i'm currently struggling with the same issue. Any chances you've figured out how it works?
Hi, this is quite easy to do using a custom component.
<template>
<multiselect ref="dropdown" v-model="value">
<template v-for="(_, slot) in $slots" #[slot]="scope">
<slot :name="slot" v-bind="scope || {}" />
</template>
</multiselect>
</template>
<script>
import Multiselect from '@vueform/multiselect';
export default {
components: {
Multiselect,
},
props: ['modelValue', 'checkInfiniteScroll'],
emits: ['update:modelValue', 'infinite-scroll'],
computed: {
value: {
get() {
return this.modelValue;
},
set(value) {
this.$emit('update:modelValue', value);
},
},
},
mounted() {
if (this.checkInfiniteScroll) {
const list = this.$el.querySelector('.dropdown');
list.addEventListener('scroll', () => this.determineIfEndOfScroll(list));
}
},
beforeUnmount() {
if (this.checkInfiniteScroll) {
const list = this.$el.querySelector('.dropdown');
list.removeEventListener('scroll', () => this.determineIfEndOfScroll(list));
}
},
methods: {
determineIfEndOfScroll(list) {
if (list.clientHeight !== list.scrollHeight && list.scrollTop + list.clientHeight >= list.scrollHeight) {
this.$emit('infinite-scroll');
}
},
},
};
</script>
You should now be able to set checkInfiniteScroll to true then listen to the @infinite-scroll event to load more data.
I'm also struggling with this issue. These workarounds are good but is there a plan to fix the actual functionality for infinite scroll?
Hi, im also having issue with this, maybe is there any official solution to handle pagination from server-side? or more clearer way to handle this ? thanks everyone for the help or answer.
