Question

我不确定这个标题是否最好地定义了我要达到的目标，但是我希望这种解释可以帮助您更好地理解我的查询。

我正在研究Vuetify表单生成器，它有两个组成部分，一个是FormData.vue，第二个是FormResult.vue

我正在将一个对象从FormData传递到FormResult，该对象包含一些规则，例如输入类型（文本，电子邮件，密码），必填（真，假）和最大字符。

基于该值，我正在使用vueitfy的rules道具以编程方式对表单进行验证，

:rules="AddRules(Field)"和AddRules(Field)函数返回规则数组。

字段：

 <v-text-field
            v-if="Field.Type === 'TextField'"
            v-model="Field.DefaultValue"
            :label="Field.Label"
            :min="0"
            :counter="Field.Counter"
            :rules="Rules(Field)"
          ></v-text-field>

但是我有条件地处理AddRules()函数，该函数只返回并实现第一个数组，因为rules prop接受数组

Rules(Field) {

      if (Field.FiledRequired) {
        return [
          v => !!v || Field.Label + ' is required',
        ]
      }

      if (Field.Counter > 0) {
        if (Field.DefaultValue) {
          return [
            v => v.length <= Field.Counter || 'Max ' + Field.Counter + ' characters',
          ]
        }
      }

      if (Field.Rules == "Email") {
        return [
          v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
        ]
      }

    }

我通过将规则数组推入数据对象来进行尝试，例如：

...
data(){
    return {
        MyRules: []
    }
}
...
Rules(Field) {
      if (Field.Rules == "Email") {
        this.MyRules.push(v => /.+@.+\..+/.test(v) || 'E-mail must be valid')
      }
       ...
    }

但是它给出了无限循环错误[Vue warn]: You may have an infinite update loop in a component render function

这是我从FormData传递到FormResult的数组

 NewField() {
      this.Fields.push({ Type: "TextField", Label: "", FiledRequired: false, Counter: '25', Rules: '', DefaultVal: '' })
    }

我想要实现的是，rules数组应该检查所有验证，而不是第一个。

该项目的代码位于GitHub上。不过，如果您有任何问题，我会在那里回答。

任何帮助将不胜感激。谢谢！

根据另一个数组（Vue，JavaScript）更新新数组

0 个答案: