Update static/usage/v8/toggle/helper-error/vue.md

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>
ionic-team · thetaPC · Mar 11, 2025 · Mar 10, 2025 · Mar 10, 2025 · Mar 10, 2025
commit ec266bef6bc6053263778839257cb328d9873e05
diff --git a/static/usage/v8/toggle/helper-error/vue.md b/static/usage/v8/toggle/helper-error/vue.md
@@ -1,53 +1,47 @@
 ```html
 <template>
-  <form @submit.prevent="submit">
-    <ion-toggle
-      v-model="wifi"
-      helper-text="This needs to be enabled"
-      error-text="This field is required"
-      @ionChange="validateToggle"
-      :class="{ 'ion-valid': isValid, 'ion-invalid': isValid === false, 'ion-touched': isTouched }"
-    >
-      Wi-Fi
-    </ion-toggle>
-
-    <br />
-
-    <ion-button type="submit" size="small">Submit</ion-button>
-  </form>
+  <ion-toggle
+    v-model="wifi"
+    helper-text="Enable to connect to available networks"
+    error-text="Must be enabled to access the internet"
+    justify="space-between"
+    @ionChange="validateToggle"
+    :class="{
+      'ion-valid': isValid,
+      'ion-invalid': isValid === false,
+      'ion-touched': isTouched,
+    }"
+  >
+    Wi-Fi
+  </ion-toggle>
 </template>
 
 <script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { IonToggle, IonButton, ToggleCustomEvent } from '@ionic/vue';
-
-  export default defineComponent({
-    components: {
-      IonToggle,
-      IonButton,
-    },
-    setup() {
-      const wifi = ref(false);
-      const isTouched = ref(false);
-      const isValid = ref<boolean | undefined>();
+import { defineComponent, ref } from 'vue';
+import { IonToggle, IonButton, ToggleCustomEvent } from '@ionic/vue';
 
-      const validateToggle = (event: ToggleCustomEvent<{ checked: boolean }>) => {
-        isTouched.value = true;
-        isValid.value = event.detail.checked;
-      };
+export default defineComponent({
+  components: {
+    IonToggle,
+    IonButton,
+  },
+  setup() {
+    const wifi = ref(true);
+    const isTouched = ref(false);
+    const isValid = ref<boolean | undefined>();
 
-      const submit = () => {
-        validateToggle({ detail: { checked: wifi.value } } as ToggleCustomEvent<{ checked: boolean }>);
-      };
+    const validateToggle = (event: ToggleCustomEvent<{ checked: boolean }>) => {
+      isTouched.value = true;
+      isValid.value = event.detail.checked;
+    };
 
-      return {
-        wifi,
-        isTouched,
-        isValid,
-        validateToggle,
-        submit,
-      };
-    },
-  });
+    return {
+      wifi,
+      isTouched,
+      isValid,
+      validateToggle,
+    };
+  },
+});
 </script>
 ```