带有 axios 的 Laravel 8 和 Vue 3 - 分页

问题描述

我正在使用带有 axios 的 Laravel 8 和 Vue 3。此 https://www.npmjs.com/package/laravel-vue-pagination laravel vue 分页是否适用于这些版本的 laravel 和 vue？

有人用过吗？

谢谢。

解决方法

这是 vue js 中的简单分页，这是我的代码示例

  data(){
          return {
            current: 1,pageSize: 4,matchingJobs: {},}
      },computed: {
        indexStart() {
          return (this.current - 1) * this.pageSize;
        },indexEnd() {
          return this.indexStart + this.pageSize;
        },paginated() {
          return this.matchingJobs.slice(this.indexStart,this.indexEnd);
        }
      },methods: {
        prev() {
          this.current--;
        },next() {
          this.current++;
        }
      getJobs(){
        axios.get('/jobs').then(response => {
            this.matchingjobs = response.data
            }).catch(errors => {
            console.log(errors)
        })
      },},created(){
      this.getJobs()  
  }

设置 current: 1 和 pageSize:whatever number 项，您希望使用计算它们来操作来自您的 api 的响应数据。我不擅长解释，但我希望这些代码是可以理解的，那么这应该在你的 html 中

<div v-if="matchingJobs.length">
                <div class="row">
                    <div v-for="(job,index) in paginated" :key="index.id" class="col-xs-6 col-sm-4 col-md-3 col-lg-3 border-light mb-3">
                        <SingleJob :job="job" />
                    </div>
                </div>

                <!-- PAGINATION START -->
                <div class="col-12 mt-4 pt-2">
                    <ul class="pagination justify-content-center mb-0">
                        <li class="page-item"><a class="page-link" @click="prev" aria-label="Previous">Prev</a></li>
                        <li class="page-item active"><a class="page-link" href="javascript:void(0)">{{ current }}</a></li>
                        <li class="page-item"><a class="page-link" @click="next()" aria-label="Next">Next</a></li>
                    </ul>
                </div><!--end col-->
                <!-- PAGINATION END -->

希望对你有帮助