CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
Pianoc
Pianoc

Reputation: 807

Implementing the Vuetify pagination component

I just need some guidance on how to configure vuetify pagination. I have a card component which I loop through but also want to add pagination around it. Just a point on where to start would be appreciated?

<v-pagination
  v-model="pageNo"
  :length="4"
  prev-icon="mdi-menu-left"
  next-icon="mdi-menu-right"
/>

Loop through cards:

<v-col
  v-for="asset in assets"
  :key="asset._id"
  cols="4"
>
<AssetCard
  :asset="asset"
  @send-asset-to-screen="sendAssetToScreen"
  />
</v-col>

Data:

data () {
  return {
    pageNo: 1,
    selectedAsset: ['all'],
          assetList: [],
          searchQuery: ''
  }
}

Upvotes: 1

Views: 1772

Answers (1)

mboldt
mboldt

Reputation: 1835

You will need to implement the pagination functionality yourself, the vuetify pagination component does not provide that. It will only be a visual component and provide the selected page number for you.

To handle the pagination you could create a computed property which returns only the appropriate items from your assets collection based on the pageNo property (which will be populated by the pagination component)

Example code:

<template>
  <div>
    <ul>
      <li v-for="(item, index) in pagedAssets" :key="`asset_index_${index}`">
        {{ item }}
      </li>
    </ul>

    <v-pagination v-model="pageNo" :length="numPages"></v-pagination>
  </div>
</template>

<script>
export default {
  data: () => ({
    pageNo: 1,
    pageSize: 3,
    assets: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16']
  }),

  computed: {
    numPages() {
      // calculate the number of pages we have
      return Math.ceil(this.assets.length / this.pageSize);
    },

    pagedAssets() {
      // get the start index for your paged result set.
      // The page number starts at 1 so the active item in the pagination is displayed properly.
      // However for our calculation the page number must start at (n-1)
      const startIndex = (this.pageNo - 1) * this.pageSize;

      // create a copy of your assets list so we don't modify the original data set
      const data = [...this.assets];

      // only return the data for the current page using splice
      return data.splice(startIndex, this.pageSize);
    }
  }
};
</script>

Upvotes: 3

Related Questions