<template>
<v-form @submit.prevent="submitForm">
<v-text-field
v-model="name"
label="Name"
:rules="nameRules"
></v-text-field>
<v-text-field
v-model="email"
label="Email"
:rules="emailRules"
></v-text-field>
<v-btn type="submit">Submit</v-btn>
</v-form>
</template>
<script>
export default {
data() {
return {
name: '',
email: '',
};
},
computed: {
nameRules() {
return [
(v) => !!v || 'Name is required',
(v) => (v && v.length <= 20) || 'Name must be less than 20 characters',
];
},
emailRules() {
return [
(v) => !!v || 'Email is required',
(v) => /.+@.+\..+/.test(v) || 'Email must be valid',
];
},
},
methods: {
submitForm() {
if (this.$refs.form.validate()) {
// Form submission logic
}
},
},
};
</script>