Using Vue3 And VeeValidate for Forms and Form Validation

Image for post
Image for post

Overview

Since a lot of folks who read my content know I work with Ionic Framework, I have implemented this solution with Ionic Vue3 Web Components

Video

Additional Examples

Image for post
Image for post

Setting Initial Values

<v-form v-slot="{ values }" 
@submit="onSubmit"
:initialValues="formData">
</v-form>

In the script, define the object with the appropriate key/value pairs to be assigned to the form

setup() {
// set some initial values
const formData = ref<any>({
title: "Aaron",
body: null,
gender: "MALE",
save : false
});
return { formData };
},

Working With Toggle, CheckBoxes

<ion-item>
<ion-label>SAVE IT</ion-label>
<v-field name="save" v-slot="{ field }">
<!-- we need to set the checked property -->
<ion-toggle v-bind="field" name="save"
:checked="field.value">
</ion-toggle>
</v-field>
</ion-item>

Links

Written by

DC based software agency utilizing #Javascript, #Typescript, #HTML5, #Ionicframework, #NodeJS, #Firebase to build web & mobile solutions. https://buff.ly/300Zru

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store