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