Refresh modal component using key

Author: netervati

components/modal/createModelData.vue

@@ -14,32 +14,16 @@
   type SchemaRow = { name: string, type: string, immutable: boolean };
 
   const model = useModel();
+  const defaultSchema = model.target?.schema.map((sch: SchemaRow) => sch);
   const form = useForm({
     initialValues: {
       name: '',
-      schema: [],
+      schema: defaultSchema,
     }
   });
 
   const isDisabled = computed(() => form.isSubmitting.value === true);
-
-  const { remove, push, fields } = useFieldArray<SchemaRow>('schema');
-
-  const resetDefaultSchema = () => {
-    for (let i = 0; i < fields.value.length; i++) {
-      remove(i);
-    }
-
-    model.target?.schema.forEach((sch: SchemaRow) => {
-      push(sch);
-    });
-  };
-
-  watch(() => model.target, () => {
-    // Temporary solution to reactively assign the
-    // default schema to the form
-    resetDefaultSchema();
-  });
+  const { fields } = useFieldArray<SchemaRow>('schema');
 
   const handleClose = () => {
     form.handleReset();

composables/useModal.ts

@@ -16,6 +16,8 @@ type UseModal = {
   open: () => void;
 };
 
+const sleep = (ms: number) => new Promise((res) => setTimeout(() => res(ms), ms));
+
 /**
  * A composable for managing modals.
  *
@@ -42,6 +44,7 @@ export default function (
   options: ModalProps = { id: 'base' }
 ): UseModal {
   const display = ref(false);
+  const refreshKey = ref(new Date());
 
   const close = () => {
     display.value = false;
@@ -51,7 +54,12 @@ export default function (
     }
   };
 
-  const open = () => {
+  const open = async () => {
+    refreshKey.value = new Date();
+
+    await nextTick();
+    await sleep(50);
+
     display.value = true;
   };
 
@@ -68,6 +76,7 @@ export default function (
       render() {
         return h(component, {
           ...options,
+          key: refreshKey.value,
           onClose: close,
         });
       },