JSFiddle - React, Tailwind, and code Playground

by lid0

HTML

<div id="app">

Page Size: <input type="number" v-model.number="perPage" />

<pre>paginate list items by page size</pre>
<div>
<template v-for="(v,k) in list" >
 <ul v-if="k % perPage == 0 ">
  <li v-for="i in ((list.length - k < perPage) ? list.length - k : perPage)" :key="k">
   {{ list[(k+i-1)]?.name }}
  </li>
 </ul>
</template>
</div>

</div>

CSS

ul {
  float:left;
}

JavaScript

import {createApp} from "https://unpkg.com/[email protected]/dist/vue.esm-browser.js";

const app = createApp({

  data() {
    return {
      perPage: 3,
      list: [{
          "id": 1,
          "name": "hello1"
        },
        {
          "id": 1,
          "name": "hello2"
        },
        {
          "id": 1,
          "name": "hello3"
        },
        {
          "id": 1,
          "name": "hello4"
        },
        {
          "id": 1,
          "name": "hello5"
        },
        {
          "id": 1,
          "name": "hello6"
        },
        {
          "id": 1,
          "name": "hello7"
        },
      ]
    }
  },
  setup() {
    return {
 
    }
  }
});

app.mount("#app");