Skip to content

Commit ec266be

Browse files
Update static/usage/v8/toggle/helper-error/vue.md
Co-authored-by: Brandy Smith <[email protected]>
1 parent 1842e6e commit ec266be

File tree

1 file changed

+37
-43
lines changed
  • static/usage/v8/toggle/helper-error

1 file changed

+37
-43
lines changed
Lines changed: 37 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,47 @@
11
```html
22
<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>
1817
</template>
1918

2019
<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';
3322
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>();
3832
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+
};
4237
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+
});
5246
</script>
5347
```

0 commit comments

Comments
 (0)