Vue 3 실전: 페이지네이션

const{createApp,ref,computed}=Vue;
createApp({
  setup(){
    const all=Array.from({length:23},(_,i)=>({id:i+1,model:'UNIT-'+String(i+1).padStart(3,'0'),threat:Math.floor(Math.random()*10)+1}));
    const page=ref(1);const perPage=5;
    const total=computed(()=>Math.ceil(all.length/perPage));
    const items=computed(()=>all.slice((page.value-1)*perPage,page.value*perPage));
    const pages=computed(()=>Array.from({length:total.value},(_,i)=>i+1));
    return{page,total,items,pages,perPage,allLen:all.length};
  },
  template:`<div>
    <div v-for='u in items' :key='u.id' style='display:flex;justify-content:space-between;padding:5px;border-bottom:1px solid #111;font-size:11px;'>
      <span style='color:#888;'>{{u.model}}</span>
      <span :style='{color:u.threat>=9?"#10b981":u.threat>=7?"#f59e0b":"#22c55e"}'>{{u.threat}}</span>
    </div>
    <div style='display:flex;gap:4px;margin-top:12px;align-items:center;flex-wrap:wrap;'>
      <button @click='page=Math.max(1,page-1)' :disabled='page===1' style='background:#1a1a1a;color:#888;border:none;padding:4px 8px;cursor:pointer;font-size:10px;'>◀</button>
      <button v-for='p in pages' :key='p' @click='page=p' :style='{background:page===p?"#10b981":"#1a1a1a",color:page===p?"#080808":"#888"}' style='border:none;padding:4px 8px;cursor:pointer;font-size:10px;'>{{p}}</button>
      <button @click='page=Math.min(total,page+1)' :disabled='page===total' style='background:#1a1a1a;color:#888;border:none;padding:4px 8px;cursor:pointer;font-size:10px;'>▶</button>
      <span style='color:#555;font-size:10px;margin-left:8px;'>{{(page-1)*perPage+1}}-{{Math.min(page*perPage,allLen)}} / {{allLen}}</span>
    </div>
  </div>`
}).mount('#page-out');