form validate css

src/components/my-form.vue

@@ -8,9 +8,10 @@
                 :placeholder="item.placeholder"
                 :type="item.type"
                 v-model="formData[key]"
-                @validate="validateData(key)">
+                @validate="validateData(key)"
+                :invalid="formErrors[key]"
+            >
             </my-input>
-            <span class="error" v-if="formErrors[key]">required</span>
         </div>
         <div>
             <button v-for="(b, i) in buttons" :key="i" @click.prevent="buttonClick(b.type)">{{ b.label }}</button>
@@ -85,10 +86,4 @@ export default {
         }
     }
 }
-</script>
-
-<style scoped>
-    .error {
-        color: red;
-    }
-</style>
+</script>

src/components/my-input.vue

@@ -9,16 +9,28 @@
             :name="name"
             :placeholder="placeholder"
             @blur="validate()"
-            @change="() => $emit('change', currentValue)">
+            @change="() => $emit('change', currentValue)"
+            :class="{invalid}"
+        >
         <input type="password" v-else-if="type == 'password'"
             v-model="currentValue"
             :name="name"
             :placeholder="placeholder"
             @blur="validate()"
-            @change="() => $emit('change', currentValue)">
+            @change="() => $emit('change', currentValue)"
+            :class="{invalid}"
+        >
     </div>
 </template>
 
+
+<style scoped>
+    .invalid {
+        background-color: #fcc;
+    }
+</style>
+
+
 <script>
 export default {
     name: "MyInput",
@@ -28,7 +40,8 @@ export default {
         'name',
         'placeholder',
         'type',
-        'value'
+        'value',
+        'invalid'
     ],
     data() {
         return {