Vue.js：ページネーション実装！データ読み込みコンポーネント作成

1年 ago
陽, 向宇
1 minute

下記の手順に従って、次のページのデータをロードするコンポーネントを作成する必要があります。

  1. LoadMoreという名前のコンポーネントを作成して、そのコンポーネントにはボタンや他のインタラクティブな要素が含まれており、次のページのデータをロードする操作をトリガーすることができます。例えば、
<template>
  <button @click="loadNextPage">加载更多</button>
</template>

<script>
export default {
  methods: {
    loadNextPage() {
      // 在这里触发加载下一页数据的操作
      // 可以通过调用父组件传递的方法来实现
      this.$emit('load-next-page');
    }
  }
}
</script>
  1. LoadMoreコンポーネントを親コンポーネントにインポートし、次のページのデータをロードするためのメソッドを渡してください。
<template>
  <div>
    <!-- 显示当前页面数据 -->
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
    
    <!-- 加载下一页数据的按钮 -->
    <LoadMore @load-next-page="loadNextPage"></LoadMore>
  </div>
</template>

<script>
import LoadMore from './LoadMore.vue';

export default {
  components: {
    LoadMore
  },
  data() {
    return {
      items: [], // 存储当前页面数据
      page: 1 // 当前页数
    };
  },
  methods: {
    loadNextPage() {
      // 在这里加载下一页数据的方法
      // 可以通过接口请求或其他方式获取数据
      // 在成功获取数据后，将数据添加到 items 中
      this.page++;
      // 此处为示例，你需要根据实际情况进行修改
      this.items = this.items.concat(newData);
    }
  }
}
</script>

したがって、ユーザーが LoadMore コンポーネントのボタンをクリックすると、親コンポーネント内の loadNextPage メソッドが呼び出され、次のページのデータを読み込む機能が実現されます。必要に応じて、LoadMore および親コンポーネント内のデータ読み込みロジックを変更することができます。

bannerAds