アプリからフィールド選択UI追加

frontend/src/components/FieldSelect.vue

@@ -3,12 +3,12 @@
     <div v-if="!isLoaded" class="spinner flex flex-center">
       <q-spinner color="primary" size="3em" />
     </div>
-    <q-table flat bordered v-else row-key="name" :selection="type" v-model:selected="selected" :columns="columns"
+    <q-table  flat bordered v-else row-key="name" :selection="type" v-model:selected="selected" :columns="columns"
       :rows="rows" :pagination="pageSetting" :filter="filter" style="max-height: 55vh;"/>
   </div>
 </template>
 <script>
-import { ref, onMounted, reactive, watch } from 'vue'
+import { ref, onMounted, reactive, watchEffect } from 'vue'
 import { api } from 'boot/axios';
 
 export default {
@@ -24,6 +24,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    selectedFields:{
+      type:Array,
+      default:()=>[]
+    },
     updateSelects: {
       type: Function
     },
@@ -36,24 +40,18 @@ export default {
       { name: 'code', label: 'フィールドコード', align: 'left', field: 'code', sortable: true },
       { name: 'type', label: 'フィールドタイプ', align: 'left', field: 'type', sortable: true }
     ]
-    const not_page = props.not_page
     const pageSetting = ref({
       sortBy: 'desc',
       descending: false,
       page: 2,
-      rowsPerPage: not_page ? 0 : 5
+      rowsPerPage: props.not_page ? 0 : 5
       // rowsNumber: xx if getting data from a server
-    })
-    const filter = props.filter
-    const rows = reactive([])
-    const selected = ref([])
-    const updateSelects = props.updateSelects
-    watch(selected, (newValue, oldValue) => {
+    });
+    const rows = reactive([]);
+    const selected = ref(props.selectedFields && props.selectedFields.length>0?props.selectedFields:[]);
 
-      if (newValue && newValue[0] && updateSelects) {
-        console.log(newValue);
-        updateSelects(newValue)
-      }
+    watchEffect(() => {
+        props.updateSelects(selected);
     });
 
     onMounted(async () => {