Question

我有一个嵌套的json模式，其中字段的数量未知。我正在使用动态组件来呈现输入元素。

我的问题是我该如何应对这种挑战以验证我的表单，因为我正在使用v-for遍历json模式，而且字段数不确定。我正在使用vuelidate验证我的动态表单。

关于如何实现此目标的任何想法？

下面是json


    [{
        "title": "Profile Information",
        "fields": [{
            "name": "profile",
            "fields": [{
              "component": "BaseInput",
              "model": "firstName",
              "label": "firstName",
              "name": "firstName",
              "validations": {
                "required": {
                  "params": null,
                  "message": "This field is required"
                },
                "minLength": {
                  "params": 3,
                  "message": "Please type at least 3 characters"
                }
              }
            }]
          },
          {
            "title": "Contact Info",
            "name": "contact",
            "fields": [{
                "component": "BaseInput",
                "model": "email",
                "name": "email",
                "label": "email",
                "validations": {
                  "required": {
                    "params": null,
                    "message": "This field is required"
                  },
                  "minLength": {
                    "params": 3,
                    "message": "Please type at least 3 characters"
                  }
                }
              },
              {
                "component": "BaseInput",
                "model": "phone",
                "name": "phone",
                "label": "phone",
                "validations": {
                  "required": {
                    "params": null,
                    "message": "This field is required"
                  },
                  "minLength": {
                    "params": 3,
                    "message": "Please type at least 3 characters"
                  }
                }
              },
              {
                "name": "links",
                "title": "Social Information",
                "fields": [{
                    "component": "BaseInput",
                    "model": "website",
                    "name": "website",
                    "label": "website",
                    "validations": {
                      "required": {
                        "params": null,
                        "message": "This field is required"
                      },
                      "minLength": {
                        "params": 3,
                        "message": "Please type at least 3 characters"
                      }
                    }
                  },
                  {
                    "component": "BaseInput",
                    "model": "linkedin",
                    "name": "linkedin",
                    "label": "linkedin",
                    "validations": {
                      "required": {
                        "params": null,
                        "message": "This field is required"
                      },
                      "minLength": {
                        "params": 3,
                        "message": "Please type at least 3 characters"
                      }
                    }
                  }
                ]
              }
            ]
          }
        ]
      },
      {
        "title": "Address Information",
        "name": "address",
        "fields": [{
          "component": "BaseInput",
          "model": "address",
          "name": "address",
          "label": "address",
          "validations": {
            "required": {
              "params": null,
              "message": "This field is required"
            },
            "minLength": {
              "params": 3,
              "message": "Please type at least 3 characters"
            }
          }
        }]
      },
      {
        "title": "Work Information",
        "name": "work",
        "fields": [{
          "component": "BaseInput",
          "model": "work",
          "name": "work",
          "label": "work",
          "validations": {
            "required": {
              "params": null,
              "message": "This field is required"
            },
            "minLength": {
              "params": 3,
              "message": "Please type at least 3 characters"
            }
          }
        }]
      }
    ]

Answer 1

是的，可以。通过使用组件的名称技巧，通过为组件提供名称并在其中使用该标记。它将像递归一样。

看看this example。

Answer 2

使用 vuelidate 暂时不可能，但是有merged到next分支中的请求支持反应性check

const form = reactive({
  foo: '',
  bar: ''
});

const validationArgs = {
  form: {
    foo: {
      required,
      $autoDirty
    },
    bar: {
      required,
      $autoDirty
    },
    required
};

const validation = useVuelidate(validationArgs, { form });

您可以采用该分支并解析json，以准备进行验证并将其放入useVuelidate方法中。

如果您发现错误或完善，也有很大的机会为github项目做贡献。

嵌套表单-vue

2 个答案: