Vue-select not loading more when searching

Question

So I made a simple v-select where i put an infinite scroll. This works good I can load all the users and when i scroll down 10 more users are added to the array. When I typ i can filter in the select and i get to see 10 users filtered but when I scroll down there are no 10 users added. I only see loading more options. I have been searching for this quit some time but haven't found an answer for this problem so I thought I try to ask it here...

The only thing I noticed debugging is when I console.log(this.$refs.load) I see :

<li data-v-299e239e class="loader"> Loading more options...</li>

But when i search nothing is logged so i guess it must be something with the observer or so...

If u need more info please ask.

my code vue component:

<template>
    <v-select
        :options="users"
        label="name"
        :filterable="false"
        @open="onOpen"
        @close="onClose"
        @search="inputSearch"
        class="form-control"
        :loading="loading"

    >
        <template #list-footer>
            <li v-show="hasNextPage" ref="load" class="loader">
                Loading more options...
            </li>
        </template>
    </v-select>
</template>
<script>
import 'vue-select/dist/vue-select.css';
import _ from "lodash";
export default {
    name: 'InfiniteScroll',
    data: () => ({
        observer: null,
        limit: 10,
        search: '',
        users: [],
        total: 0,
        page: 0,
        loading: false,
    }),
    computed: {
        hasNextPage() {
            return this.users.length < this.total
        },
    },
    mounted() {
       this.observer = new IntersectionObserver(this.infiniteScroll)

    },
    created() {
        this.getUsers();
    },
    methods: {
        getUsers(search) {
            this.page++;
            axios
                .get('users', {
                    params: {
                        search: search,
                        page: this.page,
                    }
                })
                .then((response) => {

                   this.users = this.users.concat(response.data.data);
                    this.total = response.data.total;

                })
                .catch()
                .then(() => {
                    this.loading = false;
                })
        },
        async onOpen() {
            if (this.hasNextPage) {
                await this.$nextTick()
                console.log(this.$refs.load)
                this.observer.observe(this.$refs.load)
            }
        },
        onClose() {
           this.observer.disconnect()
        },
        async infiniteScroll([{isIntersecting, target}]) {
            if (isIntersecting) {

                const ul = target.offsetParent
                const scrollTop = target.offsetParent.scrollTop
             //   this.limit += 10
                this.getUsers();
                await this.$nextTick()
                ul.scrollTop = scrollTop
            }
        },
        inputSearch: _.debounce(   async function (search, loading) {
            if (search.length) {
                this.users = []
                this.loading = true
                this.page = 0
                this.getUsers(search, loading)
                //await this.$nextTick()
            }
        }, 500),
    },
}
</script>
<style scoped>
.loader {
    text-align: center;
    color: #bbbbbb;
}
</style>

UserController :

  public function users(Request $request){



        return User::query()

            ->when($request->search,function ($q) use ($request) {

                $q->where('name', 'like', '%' . $request->search . '%');

            })
            ->orderBy('name', 'ASC')->paginate(10);


    }

Answer 1

I've fixed the issue with adding two code lines simply.

...
inputSearch: _.debounce(   async function (search, loading) {
    if (search.length) {
        this.users = []
        this.loading = true
        this.page = 0
        this.getUsers(search, loading)
        //await this.$nextTick()
        // Add following code lines for reloading the infiniteScroll observer
        this.onClose()
        await this.onOpen()
     }
}, 500),
...