How To Add Pagination For Vuejs Forms and tables.

<template>

<nav>
<b-pagination size=”md” :total-rows=”getRowCount(items)” :per-page=”perPage” 
v-model=”currentPage” prev-text=”Prev” next-text=”Next” hide-goto-end-buttons/>
</nav>
</template>

<script>

import axios from ‘axios’

export default {
  name: ‘nodes’,

  data: () => {
    return {
      items: [],
      next_url:”,
      previous_url:”,

     
      currentPage: 1,
      perPage: 10,
      totalRows: 0,
      table_data: ”,

    }
  },

  methods: {
    getFullBatch(batchs) {
     this.$router.push({ name: “batchview”, params: { batch_data: batchs } });
    },
      getBatches() {
         axios.get(NODES)
        .then((response) => {
          this.items = response.data;
          this.next_url = response.data.next;
          this.previous_url = response.data.previous;
          if (response.data.results != ”){this.table_data=true}
        }).catch(err => {
          if (err.response.status == 401) {
              const commit = ‘logout’
              this.$store.dispatch(‘logout’, { commit })
              .then(() => this.$router.push(‘/’))
              .catch(err => console.log(err))
            }
            console.log(err);
          });
    },
 
    getRowCount (items) {
      return items.length
    },
 
   
  },

  }
</script>

LEAVE A REPLY

Please enter your comment!
Please enter your name here