javascript - 验证 : Is it possible to add many rules from data on a text component with vuetify?

Question

我需要在 mixin 中为我的组件定义规则。

这是我的请求的一个简单例子

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

代码:

<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',
],

但是，根据文档

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

，我有可能传递一个数组，但我有错误:

规则应返回字符串或 bool 值，改为接收“对象”

我还尝试使用计算为的属性:

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

同样的错误

有没有办法得到我想要的东西？

谢谢

Answer 1

您现在所做的是将包含 2 个其他数组的数组传递给 rules，而 Vuetify 需要函数数组。

您需要先合并两个数组。最简单的方法是使用扩展语法:

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