dynamic recusive form

src/components/my-input.vue

@@ -6,13 +6,22 @@
         </div>
 
         <!--  -->
+        <input type="number" v-if="props && props.type == 'number'"
+            v-model="currentValue"
+            :class="{invalid}"
+            :id="name"
+            :name="name"
+            :placeholder="props.placeholder"
+            @blur="validateValue"
+            @change="handleChange"
+        >
         <input type="text" v-if="props && props.type == 'text'"
             v-model="currentValue"
             :class="{invalid}"
             :id="name"
             :name="name"
             :placeholder="props.placeholder"
-            @blur="validate"
+            @blur="validateValue"
             @change="handleChange"
         >
         <input type="password" v-else-if="props && props.type == 'password'"
@@ -21,7 +30,7 @@
             :id="name"
             :name="name"
             :placeholder="props.placeholder"
-            @blur="validate"
+            @blur="validateValue"
             @change="handleChange"
         >
         <div class="checkbox_holder" v-else-if="props && props.type == 'checkbox'">
@@ -30,6 +39,7 @@
                 v-model="currentValue"
                 :id="name"
                 :name="name"
+                @blur="validateValue"
                 @change="handleChange"
             >
             <div class="check_checkbox"></div>
@@ -54,17 +64,29 @@ export default {
         'name',
         'props',
         'value',
-        'invalid',
-        'validatorMessage'
+        // 'invalid',
+        // 'validatorMessage',
+        'validate'
     ],
     data() {
         return {
-            currentValue: this.value
+            currentValue: this.value,
+            invalid: false,
+            validatorMessage: ""
         }
     },
     methods: {
-        validate() {
-            this.$emit('validate', this.currentValue);
+        validateValue() {
+            var valid = true;
+            let v = this.validate;
+            if (v) {
+                if (v.required && !this.currentValue) {
+                    valid = false;
+                    this.validatorMessage = (typeof v.requiredMessage == "string") ? v.requiredMessage : "input required";
+                }
+            }
+            this.invalid = !valid;
+            this.$emit('validate', valid);
         },
         handleChange() {
             this.$emit('change', this.currentValue);
@@ -72,6 +94,30 @@ export default {
     },
     watch: {
         currentValue(val) {
+            if (this.props && this.props.datatype) {
+                // convert
+                let t = this.props.datatype;
+                let newVal;
+                switch (t) {
+                case "int":
+                    newVal = parseInt(this.currentValue);
+                    if (isNaN(newVal)) {
+                        newVal = 0;
+                    }
+                    break;
+                case "float":
+                    newVal = parseFloat(this.currentValue);
+                    if (isNaN(newVal)) {
+                        newVal = 0;
+                    }
+                    break;
+                }
+
+                if (newVal !== this.currentValue) {
+                    this.currentValue = newVal;
+                    return; // prevent double input events
+                }
+            }
             this.$emit('input', val);
         }
     }