I'm trying to validate a vuetify v-text-field. I have two rules, one for required field and the other for validating thar user only enters positive numbers. But it doesn't work, I get this error: [Vuetify] Rules should return a string or boolean, received 'object' instead. This is how I define the rules in vue file:
rules: {
select: [(v) => !!v || "Item is required"],
emailRules: [
v => !!v || 'E-mail is required',
v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
],
phoneRules: [
v => /(\+1)?\s?\(?\d{3}\)?-?\s?\d{3}-\d{4}/.test(v) || 'Phone Number must be valid',
v => v.length <= 15 || 'Phone Number must be valid'
],
numberRules: [
v => /\d+\.?\d*/.test(v) || 'You have to enter a number',
v => v>0 || 'You have to enter a positive number'
]
},
this is the view:
<v-text-field
v-if="loggedUser.role_id == 1"
v-model="editedItem.commission"
label="Commission (%) *"
required
:rules="[rules.select, rules.numberRules]"
></v-text-field>
If I use them separately, they work fine, but if I put them both, neither of them works.
You should concatenate the rules using the spread operator to get an array of rules:
:rules="[...rules.select, ...rules.numberRules]"