App,Field,Action Select Dialogue

frontend/src/components/AppSelect.vue

@@ -1,11 +1,11 @@
-<template v-slot:list>
+<template>
   <div class="q-pa-md">
-    ppppppp
+    <q-table :title="name+'一覧'" :selection="type" v-model:selected="selected" :columns="columns" :rows="rows" />
   </div>
 </template>
 <script>
-import { ref, onMounted } from 'vue'
-import axios from 'axios'
+import { ref,onMounted,reactive } from 'vue'
+import { api } from 'boot/axios';
 
 export default {
   name: 'appSelect',
@@ -14,14 +14,27 @@ export default {
     type: String
   },
   setup() {
+  const columns = [
+  { name: 'id', required: true,label: 'アプリID',align: 'left',field: 'id',sortable: true},
+  { name: 'name', align: 'center', label: 'アプリ名', field: 'name', sortable: true },
+  { name: 'creator', label: '作成者', field: 'creator', sortable: true },
+  { name: 'createdate', label: '作成日時', field: 'createdate' }
+  ]
+  const rows = reactive([])
+    onMounted( () => {
+        api.get('allapps').then(res =>{
+         res.data.apps.forEach((item) =>
+        {
+          rows.push({id:item.appId,name:item.name,creator:item.creator.name,createdate:item.createdAt});
+        }
+        )
+      });
+      });
     return {
+      columns,
+      rows,
       selected: ref([]),
-    },
-      onMounted(() => {
-        console.log('Mounted');
-        axios.get('http://127.0.0.1:8000/api/v1/allapps')
-          .then(res => console.log(res.data))
-      })
+    }
   },
 
 }