CODEWITHSUNDEEP
laravelvue.jspaginationlaravel-8laravel-pagination
Raul Pop
Raul Pop

Reputation: 23

Laravel 8 and Vue 3 with axios - paginate

I m using Laravel 8 and Vue 3 with axios. Is this https://www.npmjs.com/package/laravel-vue-pagination laravel vue pagination working with these versions of laravel and vue?

has someone used it?

THX.

Upvotes: 0

Views: 2317

Answers (1)

WillianBabuu
WillianBabuu

Reputation: 437

here is simple pagination in vue js, this is my example form my codes

  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()  
  }

sett current: 1 and pageSize:whatever number of items you want to be use computed to manipulate response data from your api. I am not good in explaining but I hope those codes are understandable then this should be in your 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 -->

I hope this will be helpful

Upvotes: 1

Related Questions