嵌套形式——vue

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

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

看一下这个例子。