|
1 | 1 | ```html |
2 | 2 | <template> |
3 | | - <form @submit.prevent="submit"> |
4 | | - <ion-toggle |
5 | | - v-model="wifi" |
6 | | - helper-text="This needs to be enabled" |
7 | | - error-text="This field is required" |
8 | | - @ionChange="validateToggle" |
9 | | - :class="{ 'ion-valid': isValid, 'ion-invalid': isValid === false, 'ion-touched': isTouched }" |
10 | | - > |
11 | | - Wi-Fi |
12 | | - </ion-toggle> |
13 | | - |
14 | | - <br /> |
15 | | - |
16 | | - <ion-button type="submit" size="small">Submit</ion-button> |
17 | | - </form> |
| 3 | + <ion-toggle |
| 4 | + v-model="wifi" |
| 5 | + helper-text="Enable to connect to available networks" |
| 6 | + error-text="Must be enabled to access the internet" |
| 7 | + justify="space-between" |
| 8 | + @ionChange="validateToggle" |
| 9 | + :class="{ |
| 10 | + 'ion-valid': isValid, |
| 11 | + 'ion-invalid': isValid === false, |
| 12 | + 'ion-touched': isTouched, |
| 13 | + }" |
| 14 | + > |
| 15 | + Wi-Fi |
| 16 | + </ion-toggle> |
18 | 17 | </template> |
19 | 18 |
|
20 | 19 | <script lang="ts"> |
21 | | - import { defineComponent, ref } from 'vue'; |
22 | | - import { IonToggle, IonButton, ToggleCustomEvent } from '@ionic/vue'; |
23 | | -
|
24 | | - export default defineComponent({ |
25 | | - components: { |
26 | | - IonToggle, |
27 | | - IonButton, |
28 | | - }, |
29 | | - setup() { |
30 | | - const wifi = ref(false); |
31 | | - const isTouched = ref(false); |
32 | | - const isValid = ref<boolean | undefined>(); |
| 20 | +import { defineComponent, ref } from 'vue'; |
| 21 | +import { IonToggle, IonButton, ToggleCustomEvent } from '@ionic/vue'; |
33 | 22 |
|
34 | | - const validateToggle = (event: ToggleCustomEvent<{ checked: boolean }>) => { |
35 | | - isTouched.value = true; |
36 | | - isValid.value = event.detail.checked; |
37 | | - }; |
| 23 | +export default defineComponent({ |
| 24 | + components: { |
| 25 | + IonToggle, |
| 26 | + IonButton, |
| 27 | + }, |
| 28 | + setup() { |
| 29 | + const wifi = ref(true); |
| 30 | + const isTouched = ref(false); |
| 31 | + const isValid = ref<boolean | undefined>(); |
38 | 32 |
|
39 | | - const submit = () => { |
40 | | - validateToggle({ detail: { checked: wifi.value } } as ToggleCustomEvent<{ checked: boolean }>); |
41 | | - }; |
| 33 | + const validateToggle = (event: ToggleCustomEvent<{ checked: boolean }>) => { |
| 34 | + isTouched.value = true; |
| 35 | + isValid.value = event.detail.checked; |
| 36 | + }; |
42 | 37 |
|
43 | | - return { |
44 | | - wifi, |
45 | | - isTouched, |
46 | | - isValid, |
47 | | - validateToggle, |
48 | | - submit, |
49 | | - }; |
50 | | - }, |
51 | | - }); |
| 38 | + return { |
| 39 | + wifi, |
| 40 | + isTouched, |
| 41 | + isValid, |
| 42 | + validateToggle, |
| 43 | + }; |
| 44 | + }, |
| 45 | +}); |
52 | 46 | </script> |
53 | 47 | ``` |
0 commit comments