Answer the question
In order to leave comments, you need to log in
Why is infinity scroll not working correctly in vue(vuex) express.js?
The problem is that when I load the first entry in the list, everything works correctly, but when I go back without reloading the page and go to another entry, I load the entries out of order, why is this happening?
// вызов на получение данных (1)
async asyncData({ params, store }) {
try {
await store.dispatch('order/fetchId', params)
} catch (e) {}
},
data() {
return {
page: 2
}
},mounted() {
const eventHandler = () => {
const scrollTop = document.documentElement.scrollTop
const viewPortHeight = window.innerHeight
const totalHeight = document.documentElement.offsetHeight
const atTheBottom = scrollTop + viewPortHeight === totalHeight
if (atTheBottom) {
_.debounce(() => {
this.load(this.page) // вызиваемо собитие при scroll
}, 400)()
}
}
window.addEventListener('scroll', eventHandler)
},
methods: {
async load(page = 2) {
try {
console.log(page)
await this.$store.dispatch('order/fetchLoadPage', {
page: +this.page,
id: this.$route.params.id
})
await this.page++
} catch (e) {
// console.log(e)
}
}
}
// back end
// вызов на получение данных (1)
module.exports.fetchId = async (req, res) => {
const { id } = req.params
try {
const order = await Order.findById(id)
const tickets = await Tickets.find({ id_order: id })
.limit(100)
.sort({
numberTickets: 1
})
return res.json({ order, tickets })
} catch (e) {
return res.json(e)
}
}
// второй вызов который будет при скролле
module.exports.fetchLoadPage = async (req, res) => {
const { id, page } = req.params
const perPage = 100
const newTickets = await Tickets.find({ id_order: id })
.sort({ numberTickets: 1 })
.skip(perPage * page - perPage)
.limit(perPage)
return await res.json(newTickets)
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question