所以我做了一个简单的v选择，我把无限滚动。这工作得很好，我可以加载所有的用户，当我向下滚动10多个用户被添加到数组。当我输入时，我可以在选择中过滤，我看到10个用户被过滤，但当我向下滚动时，没有添加10个用户。我只看到加载更多选项。我一直在寻找这个退出一段时间，但还没有找到这个问题的答案，所以我想我试着问它在这里…
我唯一注意到的调试是当我console.log(this.$ref .load)我明白了:
<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>
用户控件:
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);
}
我已经修复了添加两行代码的问题。
...
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),
...