vue-select搜索时不会加载更多

Question

因此，我制作了一个简单的V-Select，在其中放了一个无限的卷轴。这很好，我可以加载所有用户，当我向下滚动时，将另外10个用户添加到数组中。当我键入时，我可以在SELECT中过滤，并且可以看到10个用户过滤，但是当我向下滚动时，没有添加10个用户。我只看到加载更多选项。我一直在寻找一些时间，但没有找到这个问题的答案，所以我想我尝试在这里问它...

我注意到的唯一调试是我and console.log（this。 ） 我明白了：

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

但是，当我搜索什么都没有记录时，所以我想观察者左右一定是……

如果您需要更多信息，请询问。

我的代码 VUE组件：

<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

我已经简单地添加两个代码行修复了问题。

...
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),
...