fix vue onChange

converts additionalError and data to proxy closes #2003
eclipsesource · Feb 7, 2023 · bff0c8d · bff0c8d
1 parent 1b22f55
commit bff0c8d
Showing 1 changed file with 14 additions and 8 deletions.
diff --git a/packages/vue/vue/src/components/JsonForms.vue b/packages/vue/vue/src/components/JsonForms.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts">
-import { PropType } from 'vue';
+import { PropType, reactive } from 'vue';
 import { defineComponent } from 'vue';
 import {
   coreReducer,
@@ -34,6 +34,8 @@ const isObject = (elem: any): elem is Object => {
   return elem && typeof elem === 'object';
 };
 
+const EMPTY: ErrorObject[] = reactive([]);
+
 export default defineComponent({
   name: 'json-forms',
   components: {
@@ -97,22 +99,22 @@ export default defineComponent({
     additionalErrors: {
       required: false,
       type: Array as PropType<ErrorObject[]>,
-      default: () => []
+      default: () => EMPTY
     },
   },
   data() {
-    const generatorData = isObject(this.data) ? this.data : {};
-    const schemaToUse = this.schema ?? Generate.jsonSchema(generatorData);
+    const dataToUse: any = isObject(this.data) ? this.data : {};
+    const schemaToUse = this.schema ?? Generate.jsonSchema(dataToUse);
     const uischemaToUse = this.uischema ?? Generate.uiSchema(schemaToUse);
     const initCore = (): JsonFormsCore => {
       const initialCore = {
-        data: this.data,
+        data: this.dataToUse,
         schema: schemaToUse,
         uischema: uischemaToUse
       };
       const core = coreReducer(
         initialCore,
-        Actions.init(this.data, schemaToUse, uischemaToUse, {
+        Actions.init(this.dataToUse, schemaToUse, uischemaToUse, {
           validationMode: this.validationMode,
           ajv: this.ajv,
           additionalErrors: this.additionalErrors
@@ -122,6 +124,7 @@ export default defineComponent({
     };
     return {
       schemaToUse,
+      dataToUse,
       uischemaToUse,
       jsonforms: {
         core: initCore(),
@@ -145,6 +148,9 @@ export default defineComponent({
     uischema(newUischema) {
       this.uischemaToUse = newUischema ?? Generate.uiSchema(this.schemaToUse);
     },
+    data(newData) {
+      this.dataToUse = newData;
+    },
     renderers(newRenderers) {
       this.jsonforms.renderers = newRenderers;
     },
@@ -169,7 +175,7 @@ export default defineComponent({
     coreDataToUpdate() {
       this.jsonforms.core = coreReducer(
         this.jsonforms.core as JsonFormsCore,
-        Actions.updateCore(this.data, this.schemaToUse, this.uischemaToUse, {
+        Actions.updateCore(this.dataToUse, this.schemaToUse, this.uischemaToUse, {
           validationMode: this.validationMode,
           ajv: this.ajv,
           additionalErrors: this.additionalErrors
@@ -192,7 +198,7 @@ export default defineComponent({
   computed: {
     coreDataToUpdate(): any {
       return [
-        this.data,
+        this.dataToUse,
         this.schemaToUse,
         this.uischemaToUse,
         this.validationMode,