Added strict one-way binding to all form components

src/components/pluginComponents/formComponents/JsonForm.vue

@@ -1,12 +1,24 @@
 <template>
-  <div>
-    <component v-for="(field, index) in schema"
-      :key="index"
-      :is="field.fieldType"
-      v-model="formData[field.name]"
-      v-bind="field">
+  <div class="uk-form-stacked">
+    <div v-for="(field, index) in schema" :key="index"> 
+    
+      <div v-if="Array.isArray(field)" class="uk-grid-small" uk-grid>
+        <div v-for="(subfield, subindex) in field" :key="subindex" class="uk-width-expand"> 
+          <component
+            :is="subfield.fieldType"
+            @input="updateForm(subfield.name, $event)"
+            v-bind="subfield">
+          </component>
+        </div>
+      </div>
+      
+      <component
+        :is="field.fieldType"
+        @input="updateForm(field.name, $event)"
+        v-bind="field">
+      </component>
 
-    </component>
+    </div>
   </div>
 </template>
 
@@ -16,6 +28,8 @@ import numberInput from "./fieldComponents/numberInput";
 import selectList from "./fieldComponents/selectList";
 import textInput from "./fieldComponents/textInput";
 import htmlBlock from "./fieldComponents/htmlBlock";
+import radioList from "./fieldComponents/radioList";
+import checkList from "./fieldComponents/checkList"
 
 export default {
   name: 'JsonForm',
@@ -24,7 +38,9 @@ export default {
     numberInput, 
     selectList, 
     textInput,
-    htmlBlock
+    htmlBlock,
+    radioList,
+    checkList
   },
 
   props: {
@@ -43,8 +59,24 @@ export default {
   created: function () {
     // `this` points to the vm instance
     console.log(this.schema)
+  },
+
+  methods: {
+    updateForm(fieldName, value) {
+      console.log(`${fieldName}: ${value}`)
+      this.$set(this.formData, fieldName, value);
+      this.$emit('input', this.formData)
+    }
   }
 }
 </script>
 
-<style scoped></style>
+<style scoped>
+.flex-container {
+  display: flex;
+}
+
+.flex-container > div {
+  flex-basis: 100%
+}
+</style>