JSFiddle - React, Tailwind, and code Playground

by duckduck0054

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>06-16</title>
    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/vuejs-paginator/2.0.0/vuejs-paginator.min.js"></script>
</head>

<body>
<div id="app">
  <paginated-list :list-data="people"/>  
</div>

</body>

<script>
Vue.component('paginated-list',{
  data(){
    return {
      pageNumber: 0
    }
  },
  props:{
    listData:{
      type:Array,
      required:true
    },
    size:{
      type:Number,
      required:false,
      default: 10
    }
  },
  methods:{
      nextPage(){
         this.pageNumber++;
      },
      prevPage(){
        this.pageNumber--;
      }
  },
  computed:{
    pageCount(){
      let l = this.listData.length,
          s = this.size;
      return Math.floor(l/s);
    },
    paginatedData(){
      const start = this.pageNumber * this.size,
            end = start + this.size;
      return this.listData.slice(start, end);
    }
  },
  template: `<div>
               <ul>
                  <li v-for="p in paginatedData">
                    {{p.first}} 
                    {{p.last}}  
                    {{p.suffix}}
                  </li>
               </ul>
              <button 
                  :disabled="pageNumber === 0" 
                  @click="prevPage">
                  Previous
              </button>
              <button 
                  :disabled="pageNumber >= pageCount -1" 
                  @click="nextPage">
                  Next
              </button>
             </div>
  `
});





function createFakeData(){
  let data = [];
  for(let i = 0; i < 100; i++){
    data.push({first: 'John',
               last:'Doe', 
               suffix:'#' + i});
  }
  return data;
}



new Vue({
  el:'#app',
  data:{
    people: createFakeData()
  }
})
</script>
</html>