显示带有nuxt的分页加载的加载属性

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="loadMore">加载更多</button>
    <div v-if="loading">加载中...</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [],
      loading: false,
      page: 1,
      pageSize: 10
    };
  },
  mounted() {
    this.loadMore();
  },
  methods: {
    loadMore() {
      this.loading = true;
      // 发起异步请求获取数据
      // 根据当前页数和每页大小计算请求的起始位置和结束位置
      const start = (this.page - 1) * this.pageSize;
      const end = this.page * this.pageSize;
      // 模拟异步请求
      setTimeout(() => {
        // 假设从服务器获取到了新的数据
        const newData = [
          { id: 1, name: 'Item 1' },
          { id: 2, name: 'Item 2' },
          { id: 3, name: 'Item 3' },
          // ...
        ];
        // 将新的数据添加到已有数据列表中
        this.items = this.items.concat(newData);
        // 增加当前页数
        this.page++;
        this.loading = false;
      }, 1000);
    }
  }
};
</script>