I need to define rules in a mixin for my ponents.

Here is a simple example of my request

/

The code :

<v-text-field :rules="[nbRules, requiredRules]" outlined v-model="name" label="Nom du ticket" required></v-text-field>

...

requiredRules: [
  v => !!v || 'Le champs est obligatoire',
],
nbRules: [
  v => v.length <= 10 || 'Name must be less than 10 characters',
],

However, according to the documentation

Accepts an array of functions that take an input value as an argument and return either true / false or a string with an error message

, I have the possibility of passing an array but there, I have the error:

Rules should return a string or boolean, received 'object' instead

I also tried to use the properties puted as :

customRules(nb = 10) {
    const rules = [];

    if (nb) {
        const rule =
            v => (v || '').length <= nb ||
                `A maximum of ${nb} characters is allowed`

        rules.push(rule)
    }
    return rules
},

But same error

Is there a way to get what I want?

Thank you

I need to define rules in a mixin for my ponents.

Here is a simple example of my request

https://jsfiddle/alexisgt01/0tg4ovnz/2/

The code :

<v-text-field :rules="[nbRules, requiredRules]" outlined v-model="name" label="Nom du ticket" required></v-text-field>

...

requiredRules: [
  v => !!v || 'Le champs est obligatoire',
],
nbRules: [
  v => v.length <= 10 || 'Name must be less than 10 characters',
],

However, according to the documentation

Accepts an array of functions that take an input value as an argument and return either true / false or a string with an error message

, I have the possibility of passing an array but there, I have the error:

Rules should return a string or boolean, received 'object' instead

I also tried to use the properties puted as :

customRules(nb = 10) {
    const rules = [];

    if (nb) {
        const rule =
            v => (v || '').length <= nb ||
                `A maximum of ${nb} characters is allowed`

        rules.push(rule)
    }
    return rules
},

But same error

Is there a way to get what I want?

Thank you

• javascript
• vue.js
• vuetify.js

1 Answer 1

What you doing now is passing array containing 2 other arrays into rules while Vuetify expects array of functions.

You need to merge two arrays first. Easiest way to do it is using spread syntax:

<v-text-field :rules="[...nbRules, ...requiredRules]" outlined v-model="name" label="Nom du ticket" required></v-text-field>