pagination for game list

frontend/src/vues/GameList.vue

@@ -8,7 +8,7 @@
       </tr>
     </thead>
     <tbody>
-      <tr v-for="game in games.data">
+      <tr v-for="game in games">
         <td>
           <a v-bind:href="`/#/games/${game.id}`">{{ game.id }}</a>
         </td>
@@ -19,8 +19,7 @@
       </tr>
     </tbody>
   </v-table>
-  <button @click="previousPage()">pp</button>
-  <button @click="nextPage()">np</button>
+  <v-pagination :length="pageCount" @prev="previousPage()" @next="nextPage()" @update:modelValue="setPage($event)"></v-pagination>
 </template>
 <style></style>
 
@@ -31,18 +30,35 @@ import axios from 'axios'
 let page = 1
 let count = 10
 const games = ref({})
+const pageCount = ref({})
 
-onMounted(async () => {
-  games.value = await axios.post('/api/game', { page: `${page}`, count: '10', orderBy: 'id' })
-})
+async function loadData() {
+  const response = await axios.post('/api/game', { 
+    page: `${page}`, 
+    count: '10', 
+    orderBy: 'id' 
+  })
+
+  games.value = response.data.gameData
+  pageCount.value = response.data.pageCount
+}
 
 async function nextPage() {
   page++
-  games.value = await axios.post('/api/game', { page: `${page}`, count: '10', orderBy: 'id' })
+  loadData()
 }
 
 async function previousPage() {
   page--
-  games.value = await axios.post('/api/game', { page: `${page}`, count: '10', orderBy: 'id' })
+  loadData()
 }
+
+function setPage(targetPage:number) {
+  this.page=targetPage - 1
+  loadData() 
+}
+
+onMounted(async () => {
+  loadData()
+})
 </script>