Struggling to implement conditional required fields on a form. The approach I've taken is by setting a data field notRequired: false, and then using it in the fields like this: :required="!notRequired". This allows me to make certain fields not required based on specific conditions. However, despite this setup, error messages still appear due to the rules set for each field. Is there a way to also make these rules conditional?
<template>
<v-text-field
label='Agency Name'
v-model='agency.name'
:rules='nameRules'
:required="!notRequired"
required>
</v-text-field>
<v-text-field
label='Agency Code'
:rules='codeRules'
:required="!notRequired"
v-model='agency.code'>
</v-text-field>
<v-text-field
label='Agency location'
:rules='locationRules'
:required="notRequired"
v-model='agency.location'>
</v-text-field>
</template>
<script>
export default {
data: function () {
return {
notRequired: false,
agency: {
name: '',
code: '',
location: '',
}
nameRules: [
value => !!value || 'Please enter name'
],
codeRules: [
value => !!value || 'Please enter code'
],
locationRules: [
value => !!value || 'Please enter location'
],
}
}
}
</script>