중첩된 형식 - vue

중첩된 형식 - vue

필드 수를 알 수 없는 중첩된 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"
            }
          }
        }]
      }
    ]

네, 가능합니다.컴포넌트의 이름 트릭을 사용하여 컴포넌트의 이름을 지정하고 그 안에 있는 태그를 사용합니다.재귀적인 것처럼 행동할 것이다.

이 예를 보세요.

vuelidate를 사용하면 현재로서는 불가능하지만, 에 병합된 요청이 있습니다.next반응성 검사를 지원하는 분기

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

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

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

당신은 그 분기를 가지고 해석할 수 있습니다.json그것을 검증용으로 준비하여 에 넣다useVuelidate방법.

또한 버그를 발견하거나 개선하면 github 프로젝트에 기여할 수 있는 절호의 기회입니다.

언급URL : https://stackoverflow.com/questions/63599815/nested-form-vue