Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vuetify : Is it possible to add many rules from data on a text component with vuetify?

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

Here is a simple example of my request

https://jsfiddle.net/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 computed 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

like image 503
Alexis Gatuingt Avatar asked Oct 20 '25 04:10

Alexis Gatuingt


1 Answers

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>
like image 65
Michal Levý Avatar answered Oct 21 '25 19:10

Michal Levý



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!