form validationMessage

src/views/forms/login.vue

@@ -10,6 +10,10 @@
 
                 <my-form :elements="elements" :buttons="buttons" :submitHandler="login"></my-form>
 
+                <transition name="component-fade">
+                    <div class="loginerror" v-show="loginError">{{ loginError }}</div>
+                </transition>
+
                 <div style="clear:both;"></div>
             </div>
         </div>
@@ -33,19 +37,22 @@ export default {
                     placeholder: "Benutzername",
                     icon: "icon-user",
                     type: "text",
-                    required: true
+                    required: true,
+                    requiredMessage: "Der Benutzername wird benötigt!"
                 },
                 password: {
                     placeholder: "Passwort",
                     icon: "icon-key",
                     type: "password",
-                    required: true
+                    required: true,
+                    requiredMessage: "Das Passwort wird benötigt!"
                 }
             },
             buttons: [{
                 label: "login",
                 type: "submit"
-            }]
+            }],
+            loginError: ""
         }
     },
     methods: {
@@ -59,12 +66,25 @@ export default {
                 .catch(error => {
                     console.log("---- login error -------");
                     console.log(error);
+                    this.loginError = "Loginfehler: " + error;
                 });
         }
     }
 }
 </script>
 
+<style scoped>
+    .loginerror {
+        color: black;
+        font-size: 1em;
+        text-align: center;
+        background-color: #faa;
+        padding: 10px;
+        margin-top: 10px;
+        border-radius: 30px;
+    }
+</style>
+
 <style lang="less">
 @import "~mixins";
 
@@ -127,4 +147,5 @@ export default {
         }
     }
 }
-</style>
+</style>
+