使用vuetify的无限循环

npm install vuetify

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'

const app = createApp(App)
app.use(vuetify)
app.mount('#app')

<template>
  <v-container>
    <v-row>
      <v-col v-for="(item, index) in items" :key="index" cols="12" sm="6" md="4" lg="3">
        <v-card>
          <v-card-title>{{ item.text }}</v-card-title>
        </v-card>
      </v-col>
    </v-row>
    <div v-intersect="onIntersect" />
  </v-container>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      page: 1,
      loading: false,
    };
  },
  methods: {
    async onIntersect(entries, observer, isIntersecting) {
      if (isIntersecting && !this.loading) {
        this.loading = true;
        await this.fetchMoreItems();
        this.loading = false;
      }
    },
    async fetchMoreItems() {
      // 模拟异步请求数据
      await new Promise((resolve) => setTimeout(resolve, 1000));
      for (let i = 0; i < 10; i++) {
        this.items.push({ text: 'Item ' + ((this.page - 1) * 10 + i + 1) });
      }
      this.page++;
    },
  },
  mounted() {
    this.fetchMoreItems();
  },
};
</script>