J
J
jekanok2020-09-09 22:24:01
Express.js
jekanok, 2020-09-09 22:24:01

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)
}

5f592bb53c00f223014190.png

5f592bc572328789950891.png

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question