Vue如何处理评论的分页加载？

在Vue中处理评论的分页加载，一般会结合`v-for`循环和` computed`属性或者`async/await`来实现。以下是一个基本的示例：

1. 定义数据结构：在数据里添加一个`commentsList`数组，表示评论的原始数据，以及一个`currentPage`用于记录当前页码。

data() {
  return {
    currentPage: 1,
    commentsPerPage: 10, // 每页的评论数
    commentsList: [], // 存储所有评论的数据
  }
},

2. 添加一个获取评论的方法，比如`fetchComments`，它接受页码作为参数，然后从服务器获取对应的评论数据。

methods: {
  async fetchComments(pageNumber) {
    try {
      const response = await axios.get(`/api/comments?page=${pageNumber}`);
      this.commentsList = response.data;
    } catch (error) {
      console.error('Error fetching comments', error);
    }
  },
}

3. 当用户滚动到底部或者切换页面时，触发分页加载。可以用`Intersection Observer API`检测元素是否进入视口，或者监听滚动事件判断是否到了底部。

mounted() {
  const observer = new IntersectionObserver(this.handleScrollToBottom);
  observer.observe(document.getElementById('comment-list'));
}

methods: {
  handleScrollToBottom(entries) {
    if (entries[0].isIntersecting) {
      this.fetchComments(this.currentPage + 1); // 加载下一页
    }
  },
},

4. 更新评论区域的展示：使用`v-for`遍历`commentsList`，并在模板中显示当前页的评论。

<ul id="comment-list" v-for="(chunk, index) in chunks" :key="index">
  <!-- 显示每个评论 -->
</ul>

这里`chunks`是通过计算属性`getChunks`得到的，例如：

computed: {
  getChunks() {
    return Array.from({ length: Math.ceil(this.commentsList.length / this.commentsPerPage) }, (_, i) => {
      return this.commentsList.slice(i * this.commentsPerPage, (i + 1) * this.commentsPerPage);
    });
  },
},