Overview
Forms and Form Validation are a key part of many applications so I wanted to create a small sample application showing one library VeeValidate Template Based Validation for Vue.js, and how to integrate it with the new Vue3 Release.
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
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>
Top comments (4)
why is it so different from process described in vee-validate documentation?
vee-validate.logaretm.com/v4/guide...
this post is almost 6 months old and I suspect their API approach has changed since then... I will have to take a look when I get a minute... until then can you be more specific?
updated code - codesandbox.io/s/frosty-microservi...
Hey! thanks for this post! Will help me with Vue3 afterwards.
p.s: I'm really loving the ionic ecosystem and UX/UI, I just only use MD for everything hahahaha
Cheers!