I'm using vee-validate in my VueJS and I wonder how can i add a validation that if form.order == 1 then the it would be required
<ValidationProvider rules="v-if="form.order == 1 ? required: ''" v-slot="{ errors }" name="Entity">
<v-col md="4">
<v-text-field
label="First Name"
v-model="form.first_name"
outlined
hide-details="auto"
:error-messages="errors[0]"
></v-text-field>
</v-col>
</ValidationProvider>
May I suggest you move @Phymo's answer into a computed property so you keep your template clean, readable, and extendable. that way, you can swap the implementation anytime. i.e.
<template>
<ValidationProvider :rules="applyRules" v-slot="{ errors }" name="Entity">
<v-col md="4">
<v-text-field
label="First Name"
v-model="form.first_name"
outlined
hide-details="auto"
:error-messages="errors[0]"
></v-text-field>
</v-col>
</ValidationProvider>
</template>
<script>
export default {
data: () => ({
form: {
// form structure
}
}),
computed: {
applyRules() {
return this.form.order === 1 ? 'required' : ''
}
}
}
</script>try this.
:rules="form.order == 1 ? 'required' : ''"
