corso vuejs
view | history | commit | commitdiff
Cristiano Magro
10 days ago b4849707f7cd990a76061f4fa4bf71b66cae0f76
commit | author | age
a19e6e 1 <template>
326c8c 2   <form @submit.prevent="submitForm">
9dfbe6 3     <div class="form-control" :class="{ invalid: usernameValidity === 'invalid' }">
a19e6e 4       <label for="user-name">Your Name</label>
6dd01e 5       <input id="user-name" name="user-name" type="text" v-model.trim="userName" @blur="validateInput" />
9dfbe6 6       <p v-if="usernameValidity === 'invalid'">please enter a valid name</p>
a19e6e 7     </div>
CM 8     <div class="form-control">
9       <label for="age">Your Age (Years)</label>
9f2039 10       <input id="age" name="age" type="number" v-model="userAge" ref="inputAge" />
a19e6e 11     </div>
CM 12     <div class="form-control">
13       <label for="referrer">How did you hear about us?</label>
9f2039 14       <select id="referrer" name="referrer" v-model="referrer">
a19e6e 15         <option value="google">Google</option>
CM 16         <option value="wom">Word of mouth</option>
17         <option value="newspaper">Newspaper</option>
18       </select>
19     </div>
20     <div class="form-control">
21       <h2>What are you interested in?</h2>
22       <div>
0adb44 23         <input id="interest-news" name="interest" type="checkbox" value="news" v-model="interest" />
a19e6e 24         <label for="interest-news">News</label>
CM 25       </div>
26       <div>
0adb44 27         <input id="interest-tutorials" name="interest" type="checkbox" value="tutorials" v-model="interest" />
a19e6e 28         <label for="interest-tutorials">Tutorials</label>
CM 29       </div>
30       <div>
0adb44 31         <input id="interest-nothing" name="interest" type="checkbox" value="nothing" v-model="interest" />
a19e6e 32         <label for="interest-nothing">Nothing</label>
CM 33       </div>
34     </div>
35     <div class="form-control">
36       <h2>How do you learn?</h2>
37       <div>
0adb44 38         <input id="how-video" name="how" type="radio" value="video" v-model="how" />
a19e6e 39         <label for="how-video">Video Courses</label>
CM 40       </div>
41       <div>
0adb44 42         <input id="how-blogs" name="how" type="radio" value="blogs" v-model="how" />
a19e6e 43         <label for="how-blogs">Blogs</label>
CM 44       </div>
45       <div>
0adb44 46         <input id="how-other" name="how" type="radio" value="other" v-model="how" />
a19e6e 47         <label for="how-other">Other</label>
CM 48       </div>
0adb44 49     </div>
9dfbe6 50
CM 51     <div class="form-control">
b48497 52       <rating-control v-model="rating"></rating-control>
9dfbe6 53     </div>
CM 54
0adb44 55     <div class="form-control">
CM 56       <input type="checkbox" id="confirm-terms" name="confirm-terms" v-model="confirm">
57       <label for="confirm-terms">Agree to terms of use?</label>
a19e6e 58     </div>
CM 59     <div>
60       <button>Save Data</button>
61     </div>
62   </form>
63 </template>
64
326c8c 65 <script>
9dfbe6 66 import RatingControl from './RatingControl.vue';
CM 67
326c8c 68 export default {
9dfbe6 69   components: {
CM 70     RatingControl,
71   },
326c8c 72   data() {
CM 73     return {
74       userName: '',
79dfa2 75       userAge: null,
9f2039 76       referrer: 'wom',
0adb44 77       interest: [],
CM 78       how: null,
79       confirm: false,
6dd01e 80       usernameValidity: 'pending',
b48497 81       rating: null,
326c8c 82     }
CM 83   },
84   methods: {
85     submitForm() {
79dfa2 86       console.log('Username: ' + this.userName);
326c8c 87       this.userName = '';
9f2039 88       console.log('User age: ');
CM 89       console.log(this.userAge); //number
90       console.log(this.$refs.inputAge.value);  //string
91       console.log(18);
0adb44 92       this.userAge = null;
9f2039 93
CM 94       console.log('referrer: ' + this.referrer);
95       this.referrer = 'wom';
79dfa2 96
0adb44 97       console.log('Checkbox: ');
CM 98       console.log(this.interest);
b48497 99       console.log('- Radio buttons: ');
0adb44 100       console.log(this.how);
CM 101       this.interest = [];
102       this.how = null;
103
b48497 104       console.log('- Confirm:');
0adb44 105       console.log(this.confirm);
CM 106       this.confirm = false;
b48497 107
CM 108       console.log('- Rating:');
109       console.log(this.rating);
110       this.rating = null;
111
6dd01e 112     },
CM 113     validateInput() {
114       if (this.userName === '') {
115         this.usernameValidity = 'invalid';
116       } else {
117         this.usernameValidity = 'valid';
118       }
119     },
326c8c 120   }
CM 121
122 }
123 </script>
124
a19e6e 125 <style scoped>
CM 126 form {
127   margin: 2rem auto;
128   max-width: 40rem;
129   border-radius: 12px;
130   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
131   padding: 2rem;
132   background-color: #ffffff;
133 }
134
135 .form-control {
136   margin: 0.5rem 0;
137 }
138
9dfbe6 139 .form-control.invalid input {
CM 140   border-color: red;
6dd01e 141 }
9dfbe6 142
CM 143 .form-control.invalid label {
144   color: red;
6dd01e 145 }
CM 146
147
a19e6e 148 label {
CM 149   font-weight: bold;
150 }
151
152 h2 {
153   font-size: 1rem;
154   margin: 0.5rem 0;
155 }
156
157 input,
158 select {
159   display: block;
160   width: 100%;
161   font: inherit;
162   margin-top: 0.5rem;
163 }
164
165 select {
166   width: auto;
167 }
168
169 input[type='checkbox'],
170 input[type='radio'] {
171   display: inline-block;
172   width: auto;
173   margin-right: 1rem;
174 }
175
326c8c 176 input[type='checkbox']+label,
CM 177 input[type='radio']+label {
a19e6e 178   font-weight: normal;
CM 179 }
180
181 button {
182   font: inherit;
183   border: 1px solid #0076bb;
184   background-color: #0076bb;
185   color: white;
186   cursor: pointer;
187   padding: 0.75rem 2rem;
188   border-radius: 30px;
189 }
190
191 button:hover,
192 button:active {
193   border-color: #002350;
194   background-color: #002350;
195 }
196 </style>