s11e146 more fields

s11e143/src/App.vue

@@ -8,7 +8,7 @@
                     <div class="form-group">
                         <label for="email">Mail</label>
                         <input
-                                v-model="email"
+                                v-model="userData.email"
                                 type="text"
                                 id="email"
                                 class="form-control">
@@ -16,6 +16,7 @@
                     <div class="form-group">
                         <label for="password">Password</label>
                         <input
+                                v-model="userData.password"
                                 type="password"
                                 id="password"
                                 class="form-control">
@@ -23,6 +24,7 @@
                     <div class="form-group">
                         <label for="age">Age</label>
                         <input
+                                v-model="userData.age"
                                 type="number"
                                 id="age"
                                 class="form-control">
@@ -102,9 +104,9 @@
                         <h4>Your Data</h4>
                     </div>
                     <div class="panel-body">
-                        <p>Mail: {{email}}</p>
-                        <p>Password:</p>
-                        <p>Age:</p>
+                        <p>Mail: {{userData.email}}</p>
+                        <p>Password:{{userData.password}}</p>
+                        <p>Age: {{userData.age}}</p>
                         <p>Message: </p>
                         <p><strong>Send Mail?</strong></p>
                         <ul>
@@ -124,7 +126,12 @@
     export default {
         data(){
             return {
-              email: '',
+                userData: {
+                    email: '',
+                    password: '',
+                    age: 30
+
+                }
             };
         }
     }