pagination for character list

frontend/src/vues/CharacterList.vue

@@ -11,7 +11,7 @@
       </tr>
     </thead>
     <tbody>
-      <tr v-for="character in characters.data">
+      <tr v-for="character in characters">
         <td>
           <a v-bind:href="`/#/characters/${character.id}`">{{ character.id }}</a>
         </td>
@@ -26,6 +26,7 @@
       </tr>
     </tbody>
   </v-table>
+  <v-pagination :length="pageCount" @prev="previousPage()" @next="nextPage()" @update:modelValue="setPage($event)"></v-pagination>
   <button @click="previousPage()">pp</button>
   <button @click="nextPage()">np</button>
 </template>
@@ -39,19 +40,23 @@ import axios from 'axios'
 
 let page = 0
 let count = 10
-const characters = ref({
-  data: [
-    { id: 1, name: 'test', player: 'test player', status: 'active', lastGame: 0 },
-    { id: 1, name: 'test', player: 'test player', status: 'active', lastGame: 0 }
-  ]
-})
+const characters = ref({})
+const pageCount = ref({})
 
 async function loadData() {
-  characters.value = await axios.post('/api/character', {
+  const response = await axios.post('/api/character', {
     page: `${page}`,
     count: `${count}`,
     orderBy: 'id'
   })
+
+  console.log(response)
+
+  characters.value = response.data.characterData
+  pageCount.value = response.data.pageCount
+
+  console.log(characters.value)
+  console.log(pageCount.value)
 }
 
 function previousPage() {
@@ -64,6 +69,11 @@ function nextPage() {
   loadData()
 }
 
+function setPage(targetPage:number) {
+  this.page=targetPage - 1
+  loadData() 
+}
+
 onMounted(async () => {
   loadData()
 })