corso vuejs
view | history | commit | commitdiff
Cristiano Magro
10 days ago 9dfbe6d1cea2eb9f1f9f0edd5fe6a16d3dce76ed
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">
52       <rating-control>
53
54       </rating-control>
55     </div>
56
0adb44 57     <div class="form-control">
CM 58       <input type="checkbox" id="confirm-terms" name="confirm-terms" v-model="confirm">
59       <label for="confirm-terms">Agree to terms of use?</label>
a19e6e 60     </div>
CM 61     <div>
62       <button>Save Data</button>
63     </div>
64   </form>
65 </template>
66
326c8c 67 <script>
9dfbe6 68 import RatingControl from './RatingControl.vue';
CM 69
326c8c 70 export default {
9dfbe6 71   components: {
CM 72     RatingControl,
73   },
326c8c 74   data() {
CM 75     return {
76       userName: '',
79dfa2 77       userAge: null,
9f2039 78       referrer: 'wom',
0adb44 79       interest: [],
CM 80       how: null,
81       confirm: false,
6dd01e 82       usernameValidity: 'pending',
326c8c 83     }
CM 84   },
85   methods: {
86     submitForm() {
79dfa2 87       console.log('Username: ' + this.userName);
326c8c 88       this.userName = '';
9f2039 89       console.log('User age: ');
CM 90       console.log(this.userAge); //number
91       console.log(this.$refs.inputAge.value);  //string
92       console.log(18);
0adb44 93       this.userAge = null;
9f2039 94
CM 95       console.log('referrer: ' + this.referrer);
96       this.referrer = 'wom';
79dfa2 97
0adb44 98       console.log('Checkbox: ');
CM 99       console.log(this.interest);
100       console.log('Radio buttons: ');
101       console.log(this.how);
102       this.interest = [];
103       this.how = null;
104
105       console.log('Confirm');
106       console.log(this.confirm);
107       this.confirm = false;
6dd01e 108     },
CM 109     validateInput() {
110       if (this.userName === '') {
111         this.usernameValidity = 'invalid';
112       } else {
113         this.usernameValidity = 'valid';
114       }
115     },
326c8c 116   }
CM 117
118 }
119 </script>
120
a19e6e 121 <style scoped>
CM 122 form {
123   margin: 2rem auto;
124   max-width: 40rem;
125   border-radius: 12px;
126   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
127   padding: 2rem;
128   background-color: #ffffff;
129 }
130
131 .form-control {
132   margin: 0.5rem 0;
133 }
134
9dfbe6 135 .form-control.invalid input {
CM 136   border-color: red;
6dd01e 137 }
9dfbe6 138
CM 139 .form-control.invalid label {
140   color: red;
6dd01e 141 }
CM 142
143
a19e6e 144 label {
CM 145   font-weight: bold;
146 }
147
148 h2 {
149   font-size: 1rem;
150   margin: 0.5rem 0;
151 }
152
153 input,
154 select {
155   display: block;
156   width: 100%;
157   font: inherit;
158   margin-top: 0.5rem;
159 }
160
161 select {
162   width: auto;
163 }
164
165 input[type='checkbox'],
166 input[type='radio'] {
167   display: inline-block;
168   width: auto;
169   margin-right: 1rem;
170 }
171
326c8c 172 input[type='checkbox']+label,
CM 173 input[type='radio']+label {
a19e6e 174   font-weight: normal;
CM 175 }
176
177 button {
178   font: inherit;
179   border: 1px solid #0076bb;
180   background-color: #0076bb;
181   color: white;
182   cursor: pointer;
183   padding: 0.75rem 2rem;
184   border-radius: 30px;
185 }
186
187 button:hover,
188 button:active {
189   border-color: #002350;
190   background-color: #002350;
191 }
192 </style>