In Vuetify, we can access data in form rules by using the v-model directive to bind form inputs to data properties and then referencing those properties in your form rules.
For example, we write
<template>
<v-form @submit.prevent="submitForm">
<v-text-field v-model="username" label="Username" required></v-text-field>
<v-text-field v-model="password" label="Password" required></v-text-field>
<v-btn type="submit" :disabled="!validForm">Submit</v-btn>
</v-form>
</template>
<script>
export default {
data() {
return {
username: '',
password: ''
};
},
computed: {
validForm() {
return this.username !== '' && this.password !== '';
}
},
methods: {
submitForm() {
// Form submission logic
}
}
};
</script>
In this example we have two text fields for username and password, each bound to username and password data properties using v-model.
We use the required attribute in the text fields to ensure they are not empty.
We have a computed property called validForm which returns true if both the username and password fields have values, and false otherwise.
The “Submit” button is disabled when the validForm computed property returns false, preventing form submission until both fields are filled.
The form submission logic is handled by the submitForm method, which we can implement as needed.
We can add more complex form rules by using additional computed properties or methods that reference other data properties or perform custom validation logic based on our requirements.