Nuxt JS магазин загружает много данных

Question

Мне нужно отобразить много элементов на странице, 1000 + JSON объектов, однако изначально мне не нужно их все на странице, скажем, только 50 или около того, а затем отображать больше по мере прокрутки пользователем. Данные загружаются и сохраняются в магазине, а также извлекаются на странице. Если я использую slice, это, похоже, решит проблему, но как я могу получить это, чтобы показать больше при прокрутке?

<template>
  <div>
    <div v-for="(item, index) in items">
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    getItems: {
      get() {
        return this.$store.state.items
      }
    }
  }
}
</script>

Answer 1

Вы можете использовать виртуальный скроллер, как этот: https://github.com/Akryum/vue-virtual-scroller

в основном он будет действовать как бесконечный скроллер и загружать только количество элементов, которое вы хотите.