Question

我在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我得到所有评论，这对性能不好。

Answer 1

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

$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的链接，那真的很好。

VueJS Axios获得评论以加载更多

1 个答案: