How to set conditional rules and required fields in vue?

Question

I am trying to make few fields conditionally required. But I am not able to make it work. I have set a data field notRequired: false and based on that I am using it in the fields as :required="!notRequired" to make those fields as not required because in some cases I need those fields as required and in some cases I don't because of which I trying to set that conditionally. The issue is the error message still appears because of the rules which are added to the fields. Is there a way to make the rules conditional too?

<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>

AVJT82 · Accepted Answer · 2020-06-03 18:18:09Z

11

You can use the ternary operator to conditionally add rules, depending on the value of notRequired:

 <v-text-field
   label="Agency Name"
   v-model="agency.name"
   :rules="notRequired ? 'nameRules' : []" <!-- HERE -->
   :required="!notRequired">
 </v-text-field>

edited Jun 3, 2020 at 18:18

answered Jun 3, 2020 at 17:13

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user12763413 Over a year ago

Invalid prop: type check failed for prop "rules". Expected Array, got String. This is the error I am getting now

AVJT82 Over a year ago

oops, yeah, passed empty string, pass an empty array instead :rules="notRequired ? 'nameRules' : []"

Collectives™ on Stack Overflow

How to set conditional rules and required fields in vue?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related