show actual games

frontend/src/vues/GameList.vue

@@ -1,29 +1,52 @@
 <template>
-  <v-container><div>potato</div><div>asdf{{potato}}{{butts}}</div></v-container>
   <v-table>
     <thead>
       <tr>
-        <th class="text-left">potato</th>
-        <th class="text-left">also potato</th>
+        <th class="text-left">ID</th>
+        <th class="text-left">Title</th>
+        <th class="text-left">Staus</th>
       </tr>
     </thead>
     <tbody>
-      <tr v-for="game in games.games">
-        <td>{{ game.potato }}</td>
-        <td>{{ game.alsoPotato }}</td>
+      <tr v-for="game in games.data">
+        <td>{{ game.id }}</td>
+        <td>{{ game.title }}</td>
+        <td>{{ game.status }}</td>
       </tr>
     </tbody>
   </v-table>
+  <button @click="previousPage()">pp</button>
+  <button @click="nextPage()">np</button>
 </template>
 <style></style>
 
 <script setup lang="ts">
+import { onMounted, onCreated, ref } from 'vue'
 import { Game, useGameStore } from '../store/gamestore'
+import axios from 'axios'
 
-const potato = import.meta.env
-// const butts = import.meta.env.dev
-const butts = import.meta.env.VITE_API_TARGET
-const games = useGameStore()
+let page = 1
+let count = 10
+const games = ref({})
 
+onMounted(async () => {
+  console.log('mounted')
+  console.log({ page: `${page}`, count: `${count}`, orderBy: 'id' })
+  games.value = await axios.post('/api/game', { page: `${page}`, count: '10', orderBy: 'id' })
+  console.log(v)
+})
 
+async function nextPage() {
+  console.log('next')
+  page++
+  games.value = await axios.post('/api/game', { page: `${page}`, count: '10', orderBy: 'id' })
+}
+
+async function previousPage() {
+  console.log('next')
+  page--
+  games.value = await axios.post('/api/game', { page: `${page}`, count: '10', orderBy: 'id' })
+}
+
+// const games = useGameStore()
 </script>