vue js pagination with simple vuejs plugin

Question

I am trying to create a paginated flexbox using data from an API but struggle with it although I read the setup step-by step.

Here is my code without styles:

<template>
  <div id="app">
    <paginate name="articles" :list="articles" class="paginate-list">
      <li v-for="item in paginated('articles')">
        {{ item }}
      </li>
    </paginate>
    <paginate-links for="items" :show-step-links="true"></paginate-links>
    <paginate-links for="items" :limit="2" :show-step-links="true"> 
    </paginate-links>
    <paginate-links for="items" :simple="{ next: 'Next »', prev: '« Back' }">
    </paginate-links>
  </div>
</template>

<script> 
  import axios from 'axios'; 
  import VuePaginate from 'vue-paginate' 

  export default {
    data() {
      return {
        items:[],
        paginate: [articles]
      }
    }, 
    created() {
      axios.get(https://zbeta2.mykuwaitnet.net/backend/en/api/v2/media-center/press-release/?page_size=61&type=5) 
        .then(response => { 
          this.items = response.data 
        }) 
    } 
  } 
</script>

that is the script part: <script> import axios from 'axios'; import VuePaginate from 'vue-paginate' export default { data() { return { items:[], paginate: [articles] } }, created() { axios.get(https://zbeta2.mykuwaitnet.net/backend/en/api/v2/media-center/press-release/?page_size=61&type=5) .then(response => { this.items = response.data }) } } </script> — Balazs Kelemen
– Balazs Kelemen, Commented Oct 28, 2021 at 14:04

Jebasuthan · Accepted Answer · 2021-10-28 19:47:18Z

1

Step 1: Install npm install --save vue-paginate Step 2: Import vue-paginate component in main.js

import VuePaginate from "vue-paginate";
Vue.use(VuePaginate);

Step 3: HTML template will be like,

 <template>
  <div id="app">
    <paginate ref="paginator" class="flex-container" name="items" :list="items">
      <li
        v-for="(item, index) in paginated('items')"
        :key="index"
        class="flex-item">
        <h4>{{ item.pub_date }}, {{ item.title }}</h4>
        <img :src="item.image && item.image.file" />
        <div class="downloads">
          <span
            v-for="downloadable in item.downloadable.filter(
              (d) => !!d.document_en
            )"
            :key="downloadable.id">
            <a :href="downloadable.document_en.file">Download</a>
          </span>
        </div>
      </li>
    </paginate>
    <paginate-links
      for="items"
      :limit="2"
      :show-step-links="true"></paginate-links>
  </div>
</template>

Step 4: Your component script like

<script>
  import axios from "axios";
  export default {
    data() {
      return {
        items: [],
        paginate: ["items"],
      };
    },
    created() {
      this.loadPressRelease();
    },
    methods: {
      loadPressRelease() {
        axios.get(`https://zbeta2.mykuwaitnet.net/backend/en/api/v2/media-center/press-release/?page_size=61&type=5`)
        .then((response) => {
          this.items = response.data.results;
        });
      }
    }
  };
</script>

Step 5: CSS style

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
ul.flex-container {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-direction: row wrap;
  flex-wrap: wrap;
  justify-content: space-around;
}
li img {
  display: initial;
  height: 100px;
}
.flex-item {
  background: tomato;
  width: calc(100% / 3.5);
  padding: 5px;
  height: auto;
  margin-top: 10px;
  color: white;
  font-weight: bold;
  text-align: center;
}
.downloads {
  margin-top: 10px;
}
ul.paginate-links.items li {
  display: inline-block;
  margin: 5px;
}
ul.paginate-links.items a {
  cursor: pointer;
}
ul.paginate-links.items li.active a {
  font-weight: bold;
}
ul.paginate-links.items li.next:before {
  content: " | ";
  margin-right: 13px;
  color: #ddd;
}
ul.paginate-links.items li.disabled a {
  color: #ccc;
  cursor: no-drop;
}
</style>

DEMO Link

edited Oct 28, 2021 at 19:47

answered Oct 28, 2021 at 17:14

Jebasuthan

5,6246 gold badges39 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Balazs Kelemen Over a year ago

thanks a lot, Jebasuthan, this work but as I can see you did not use the pagination template but created a custom pagination, is that corret?

Jebasuthan Over a year ago

@BalazsKelemen No I used the same pagination component but I added when we click the page number called the rest api. You dont need a rest api call when click on next page? You have to add the pagination only for this.items response instead of calling api again and again?

Balazs Kelemen Over a year ago

@ Jebasuthan, I am confused, so you would not need to import it at the beginning of the script? Also, I guess I don`t need a rest API

Balazs Kelemen Over a year ago

also, possible to avoid Loader and moment?

Jebasuthan Over a year ago

@BalazsKelemen Okay got it. Let me update the code and demo link too

|

Collectives™ on Stack Overflow

vue js pagination with simple vuejs plugin

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related