Vuejs axios获得评论以加载更多

Posted 2021-03-30

我在php上有一个控制器，我返回所有评论。我有一个代码：

new Vue({
  el: ".vue",
  data() {
    return {
      reviews: [],
      commentsToShow: 2
    };
  },
  methods: {
      getComments() {
         axios.get('/api/comments').then(res => {
             this.reviews = res.data;
         });
      }
  }
  created() {
     this.getComments();  
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div class="container vue">
  <div v-if="commentIndex < reviews.length" v-for="commentIndex in commentsToShow"> 
    <div>{{reviews[commentIndex].name}} says:</div>
    <i><div>{{reviews[commentIndex].description}}</div></i>
    <hr />
  </div>
  <button @click="commentsToShow += 2">show more reviews</button>
</div>

我如何才能获得axios只有2条评论，但不是所有评论。当点击按钮加载更多评论时...现在从axios我得到所有评论，这对性能不利。

答案

你需要实现分页。分页是服务器端，因此您需要编辑控制器。如果您使用Laravel，请查看pagination。否则，你必须写自己的异教徒，像（作为一个想法）somithing

$page = $_GET['page'];
$perPage = 10;
$offset = $page*$perpage;

SELECT * FROM abc LIMIT $perpage OFFSET $offset

如果您的分页工作正常，那么您只需要将您想要的页面与您的请求一起发送：

axios.get('/api/comments', {
  params: {
    page: this.currentPage + 1
  }
}).then(res => {
  this.reviews = res.data;
  this.currentpage++;
});

这将返回分页结果。

编辑

要在Laravel中使用分页：您只需要更改Eloquent查询的结尾，您的查询应该看起来像这样：

$return = Comment::where('a', 1)->paginate(itemsPerPage); //use ->paginate()

return response()->json($return);

您将获得所需的所有信息，我之前编写的axios请求将起作用。您只需要定义要返回的页面即可。只需阅读pagination的链接，它真的很棒。