package.json

 {
   "name": "@coscine/formgeneratordemo",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "private": true,
   "directories": {
     "doc": "docs"
@@ -14,7 +14,7 @@
   "dependencies": {
     "@coscine/app-util": "^1.7.0",
     "@coscine/component-library": "^1.4.0",
-    "@coscine/form-generator": "^1.10.0",
+    "@coscine/form-generator": "^1.10.1",
     "@itcenter-layout/bootstrap": "^1.5.5",
     "@itcenter-layout/masterpage": "^1.3.0",
     "@types/jquery": "^3.5.2",

src/FormGeneratorDemoApp.vue

@@ -51,6 +51,7 @@
               :mimeType="mimeType"
               :languageLocale="$root.$i18n.locale"
               :formData="formData"
+              @input="input"
             />
           </b-card>
         </b-col>
@@ -109,7 +110,7 @@ export default Vue.extend({
     CoscineFormTextarea,
   },
   computed: {
-    cssProps() {
+    cssProps(): any {
       return {
         '--linkWhite': 'url(' + rootUrl + linkWhitePath + ') 1px 9px no-repeat',
         '--mailGrey': 'url(' + rootUrl + mailGreyPath + ') 0px 6px no-repeat',
@@ -117,28 +118,6 @@ export default Vue.extend({
         '--faxGrey': 'url(' + rootUrl + faxGreyPath + ') 0px 6px no-repeat',
       };
     },
-    jsonLdData() {
-      const dataObject = {} as any;
-      dataObject['@type'] = this.applicationProfileId;
-      for (const entry of Object.keys(this.formData)) {
-        for (const metadataEntry of this.formData[entry]) {
-          if (metadataEntry.value !== '') {
-            if (metadataEntry.type === 'uri') {
-              dataObject[entry] = {
-                '@id': metadataEntry.value,
-                '@type': metadataEntry.datatype,
-              };
-            } else {
-              dataObject[entry] = {
-                '@value': metadataEntry.value,
-                '@type': metadataEntry.datatype,
-              };
-            }
-          }
-        }
-      }
-      return dataObject;
-    },
   },
   created() {
     this.getMimeTypes();
@@ -164,6 +143,7 @@ export default Vue.extend({
       timeoutId: null as any,
       timeoutMimeType: null as any,
       timeoutInterval: 500,
+      jsonLdData: {} as any,
     };
   },
   watch: {
@@ -203,6 +183,28 @@ export default Vue.extend({
     },
   },
   methods: {
+    input(formData: any) {
+      const dataObject = {} as any;
+      dataObject['@type'] = this.applicationProfileId;
+      for (const entry of Object.keys(this.formData)) {
+        for (const metadataEntry of this.formData[entry]) {
+          if (metadataEntry.value !== '') {
+            if (metadataEntry.type === 'uri') {
+              dataObject[entry] = {
+                '@id': metadataEntry.value,
+                '@type': metadataEntry.datatype,
+              };
+            } else {
+              dataObject[entry] = {
+                '@value': metadataEntry.value,
+                '@type': metadataEntry.datatype,
+              };
+            }
+          }
+        }
+      }
+      this.jsonLdData = dataObject;
+    },
     changeLocale() {
       if (this.$root.$i18n.locale === 'en') {
         this.$root.$i18n.locale = 'de';