时间戳

首页 > 解决方案 > Vuetify：是否可以使用 vuetify 从文本组件上的数据中添加许多规则？

javascript - Vuetify：是否可以使用 vuetify 从文本组件上的数据中添加许多规则？

问题描述

我需要在 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',
],

但是，根据文档

接受将输入值作为参数并返回 true / false 或带有错误消息的字符串的函数数组

，我有可能传递一个数组，但在那里，我有错误：

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

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

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

但同样的错误

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

谢谢

标签： javascriptvue.jsvuetify.js

解决方案

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

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

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

推荐阅读