cleaner inputs for Wealth

lootalot_front/src/components/NumberInput.vue

@@ -0,0 +1,28 @@
+<template>
+    <input type="text" 
+        class="input" 
+        :class="{'is-danger': has_error}"
+        :value="value"
+        @input="checkError"
+    ></input>
+</template>
+
+<script>
+    export default {
+        props: ["value"],
+        data () {
+            return { has_error: false};
+        },
+        methods: {
+            checkError (ev) {
+                const newValue = ev.target.value;
+                this.has_error = isNaN(newValue);
+                this.$emit(
+                    'input', 
+                    // Do the conversion if valid
+                    this.has_error ? newValue : Number(newValue)
+                ); 
+            }
+        },
+    }
+</script>

lootalot_front/src/components/Wealth.vue

@@ -25,11 +25,7 @@
     <nav class="columns is-1  is-variable is-mobile">
       <template v-for="i in 4">
       <div :key="`input-col-${i}`" class="column">
-        <input type="text" size="6" class="input" 
-            :key="inputs_key"
-            :class="{'is-danger': form_errors[i - 1]}" 
-            v-model.number="edit_values[i - 1]">
-        </input>
+        <NumberInput v-model="edit_values[i - 1]"></NumberInput>
       </div>
       </template>
     </nav>
@@ -52,34 +48,35 @@
 </template>
 
 <script>
+    import NumberInput from './NumberInput.vue'
     export default {
+        components: { NumberInput },
         props: ["wealth", "edit"],
         data () { 
             return {
                 edit_values: [0,0,0,0], 
-                form_errors: [false,false,false,false],
-                inputs_key: 0, // Hack to re-render inputs
             }; 
         },
         methods: {
             updateWealth (op) {
                 const values = this.edit_values;
-                this.form_errors.fill(false); // Reset error status
-                values.forEach((v,i) => {
-                    if (isNaN(v)) { 
-                        console.log("error with value", v); 
-                        this.form_errors[i] = true;
-                        };
-                });
-                const success = !this.form_errors.includes(true);
+                // Is it optimal, considering NumberInput already validates numbers ?
+                // Check that all fields are valid numbers
+                const success = values
+                    .map(v => !isNaN(v))
+                    .reduce(
+                        (t,v) => t && v, 
+                        true);
                 if (success) {
                     console.log('updated', op, values);
                     this.$emit('updated');
-                    this.edit_values.fill(0) }
-                else {
-                    console.log(this.form_errors);
-                    this.inputs_key += 1;
+                    this.resetValues();
+                } else {
+                    console.log('correct errors');
                 }
+            },
+            resetValues () {
+                this.edit_values.fill(0);
             }
         }
     }