my-form elements as array

src/components/my-form.vue

@@ -1,16 +1,16 @@
 <template>
     <form @submit.prevent="submit()">
-        <div v-for="(item, key) in elements" :key="key">
+        <div v-for="(el, idx) in elements" :key="idx">
             <component
-                :is="item.element"
+                :is="el.element"
-                :name="key"
+                :name="el.key"
-                :label="item.label"
+                :label="el.label"
-                :description="item.description"
+                :description="el.description"
-                :props="item.props"
+                :props="el.props"
-                v-model="formData[key]"
+                v-model="formData[el.key]"
-                @validate="validateData(key)"
+                @validate="validateData(el.key)"
-                :invalid="formErrors[key]"
+                :invalid="formErrors[el.key]"
-                :validatorMessage="formErrors[key] ? formErrors[key].message : ''"
+                :validatorMessage="formErrors[el.key] ? formErrors[el.key].message : ''"
             >
             </component>
         </div>
@@ -24,8 +24,14 @@
 export default {
     name: "MyForm",
     props: {
-        elements: {
+        initData: {
             type: Object,
+            default: () => {
+                return {};
+            }
+        },
+        elements: {
+            type: Array,
             default: () => {
                 return [];
             }
@@ -45,16 +51,34 @@ export default {
     },
     data() {
         return {
-            formData: {},
+            formData: this.initData,
-            formErrors: {}
+            formErrors: {},
+            elementsMap: {}
+        }
+    },
+    created() {
+        this.setOrder();
+    },
+    watch: {
+        elements() {
+            this.setOrder();
+        },
+        initData() {
+            this.formData = this.initData;
         }
     },
     methods: {
+        setOrder() {
+            this.elementsMap = {};
+            for (let a in this.elements) {
+                this.elementsMap[this.elements[a].key] = this.elements[a];
+            }
+        },
         validateData(name) {
-            if (this.elements[name].required) {
+            if (this.elementsMap[name].required) {
                 if (!this.formData[name]) {
                     this.$set(this.formErrors, name, {
-                        message: this.elements[name].requiredMessage
+                        message: this.elementsMap[name].requiredMessage
                     });
 
                     return false;
@@ -73,7 +97,7 @@ export default {
         },
         submit() {
             let valid = true;
-            Object.keys(this.elements).forEach(key => {
+            Object.keys(this.elementsMap).forEach(key => {
                 valid = (this.validateData(key) && valid);
             });
             if (valid) {

src/views/forms/login.vue

@@ -23,8 +23,9 @@ export default {
         return {
             username: "",
             password: "",
-            elements: {
+            elements: [
-                username: {
+                {
+                    key: "username",
                     element: "my-input",
                     icon: "icon-user",
                     required: true,
@@ -34,7 +35,8 @@ export default {
                         placeholder: "Benutzername"
                     }
                 },
-                password: {
+                {
+                    key: "password",
                     element: "my-input",
                     icon: "icon-key",
                     required: true,
@@ -44,7 +46,7 @@ export default {
                         placeholder: "Passwort"
                     }
                 }
-            },
+            ],
             buttons: [{
                 label: "login",
                 type: "submit"