Как мне отложить загрузку списков элементов в Vuejs и ленивую загрузку Vuetify?

Question

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

      .....
    <v-col
      v-for="(post, i) in posts"
      :key="i"
      cols="12"
    >
    <v-lazy
    v-model="isActive"
    :options="{
      threshold: .5
    }"
    transition="fade-transition"
  >
          {{Content here}}
     </....

API, используемый для теста: https://jsonplaceholder.typicode.com/posts

Answer 1

Я обнаружил, что столбцы должны иметь определенную минимальную высоту (приблизительно равную ожидаемой высоте карточек), чтобы наблюдатель пересечения v-lazy работал. Используйте что-то вроде v-sheet или v-responsive, чтобы установить min-height и содержать карты.

Также привяжите v-model из v-lazy к каждому сообщению (ie: post.isActive) вместо глобального isActive var ...

        <v-col lg="3" md="4" sm="6" cols="12" v-for="(post, index) in posts">
                <v-sheet min-height="250" class="fill-height" color="transparent">
                    <v-lazy 
                        v-model="post.isActive" :options="{
                            threshold: .5
                        }"
                        class="fill-height">
                        <v-card class="fill-height" hover>
                            <v-card-text>
                                <v-row :key="index" @click="">
                                    <v-col sm="10" cols="12" class="text-sm-left text-center">
                                        #{{ (index+1) }}
                                        <h2 v-html="post.title"></h2>
                                        <div v-html="post.body"></div>
                                    </v-col>
                                </v-row>
                            </v-card-text>
                        </v-card>
                    </v-lazy>
                </v-sheet>
        </v-col>

Демо: https://codeply.com/p/eOZKk873AJ