Delta-124 Freedom.tm > Revamp > Frontend > Implement User Profile Page (

#16)

Make usage of FormField component easier
- Simpler configuration object
- Took advantage of v-model resolution to `:value - @input`
- Updated form template
- Updated WIKI for component and template usage

Approved by:
- @jonelrempis ([email protected])
- @wilbertverayin  ([email protected])

src/components/partials/form/FormField.vue

@@ -1,12 +1,11 @@
 <template>
-    <q-field v-bind="fieldProps">
+    <q-field v-bind="field">
         <component
-            v-bind="fieldInputProps"
+            v-bind="fieldInput"
             :is="`q-${type}`"
-            :error="$v.fieldModel.$error"
-            @blur="$v.fieldModel.$touch"
-            :value="fieldModel"
-            @input="updateValue"
+            :error="$v.value.$error"
+            @blur="$v.value.$touch"
+            :value="value"
             :ref="ref"
             v-on="$listeners"
         >
@@ -16,7 +15,6 @@
 </template>
 
 <script>
-    import _ from 'lodash';
     import {
         QCheckbox,
         QChipsInput,
@@ -67,32 +65,23 @@
 
         props: {
             type: String,
-            model: {
+            value: {
                 required: true,
             },
-            fieldProps: Object,
-            validation: Object,
-            fieldInputProps: Object,
-        },
-
-        data() {
-            return {
-                fieldModel: this.model,
-            };
+            field: Object,
+            validation: {
+                default() {
+                    return {};
+                }
+            },
+            fieldInput: Object,
         },
 
         validations() {
             return {
-                fieldModel: this.validation,
+                value: this.validation,
             };
         },
-
-        methods: {
-            updateValue(value) {
-                this.fieldModel = value;
-                this.$emit('input', value);
-            },
-        }
     };
 </script>
 

src/router.js

@@ -7,10 +7,10 @@ Vue.use(VueRouter);
  * Uncomment this section and use "load()" if you want
  * to lazy load routes.
  */
-function load (component) {
+/* function load (component) {
   // '@' is aliased to src/components
   return () => import(`@/${component}.vue`)
-}
+} */
 
 export default new VueRouter({
     /*
@@ -26,6 +26,5 @@ export default new VueRouter({
      */
 
     routes: [
-        { path: '/', component: load('TestForm') }
     ]
 });

templates/form.vue

@@ -3,10 +3,8 @@
         <form-field
             v-for="(field, index) in form"
             :key="index"
-            v-model="field.model"
-            v-bind="field.config"
-            :type="field.type"
-            :model="field.model"
+            v-model="field.value"
+            v-bind="field"
         />
     </div>
 </template>
@@ -25,13 +23,11 @@
             return {
                 form: [
                     {
-                        type: 'input',
-                        model: null,
-                        validation: {},
-                        config: {
-                            fieldProps: {},
-                            fieldInputProps: {}
-                        },
+                        type: 'input', // will resolve to `q-${type}`
+                        value: null, // initial value of model
+                        validation: {}, // input validation using Vuelidate
+                        field: {}, // QField properties
+                        fieldInput: {} // `q-${type}` properties
                     }
                 ]
             };