vue.jsvuetify.jsvalidationrules

Rules should return a string or boolean, received 'object' instead when using more then one rule


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.


Solution

  • You should concatenate the rules using the spread operator to get an array of rules:

    :rules="[...rules.select, ...rules.numberRules]"