Merge pull request #41 from educorvi/feat/rewrite-side-branches/JSO-17

fix data loading for arrays
educorvi · Dec 3, 2024 · 7f5d2d9 · 7f5d2d9
2 parents e510b15 + 0ec8fd9
commit 7f5d2d9
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/vue-json-form/src/components/LayoutElements/Control.vue b/vue-json-form/src/components/LayoutElements/Control.vue
@@ -230,7 +230,10 @@ watch(jsonElement, () => {
 });
 
 onMounted(() => {
-    formData.value[savePath] = defaultFormData.value[savePath];
+    // Coalescing is needed because if this field is an array item, the value is set by ArrayControl due to
+    // the computed scope
+    formData.value[savePath] =
+        defaultFormData.value[savePath] ?? formData.value[savePath];
 });
 
 onBeforeUnmount(() => {

diff --git a/vue-json-form/src/renderings/bootstrap/controls/Array/ArrayControl.vue b/vue-json-form/src/renderings/bootstrap/controls/Array/ArrayControl.vue
@@ -11,7 +11,7 @@ import { generateUUID, VJF_ARRAY_ITEM_PREFIX } from '@/Commons';
 import { BButton } from 'bootstrap-vue-next';
 import { getComponent, useFormStructureStore } from '@/stores/formStructure';
 import draggable from 'vuedraggable/src/vuedraggable';
-import { ref, nextTick, onMounted, computed } from 'vue';
+import { ref, nextTick, onMounted, computed, onBeforeMount } from 'vue';
 import ArrayItem from '@/renderings/bootstrap/controls/Array/ArrayItem.vue';
 import PlusIcon from '@/assets/icons/PlusIcon.vue';
 
@@ -93,8 +93,6 @@ function initArray() {
     }
 }
 
-initArray();
-
 const allowAddField = computed(() => {
     if (!formData.value[savePath]) {
         initArray();
@@ -111,6 +109,8 @@ const allowRemoveField = computed(() => {
     }
     return formData.value[savePath].length > (jsonElement.minItems || 0);
 });
+
+onBeforeMount(initArray);
 </script>
 
 <template>