vue에서 Element 구성 요소를 사용할 때 v-for 순환의 폼 항목 검증

제목 설명이 좀 복잡해 보여요. vue,Element, 표 검증도 있고 v-for 순환도 있어요?좀 지저분하죠?그러나 나는 개발 과정에서 이 문제를 만났던 학우들이 한눈에 내가 말한 뜻을 이해할 수 있을 것이라고 믿는다.
먼저Element 구성 요소는 완벽한 폼 검증 방법이 있고 공식 문서도 명확하게 썼다. Element 폼 검증 API는 정상적으로 공식 문서에 추가rules 규칙에 따라 검증이 필요한 폼 항목 설정prop을 한 다음에 폼을 제출할 때form의validate 방법으로 폼 항목을 검증하면 된다.
그런데 거위 문제가 생겼다. 만약에 표 항목에 v-for동적으로 생성된 표 항목이 있다면 어떻게 검증을 설정합니까?이 공식 문서에는 명확한 설명이 없다. 우리는 해결 방안을 찾고 실제 검증을 통해 해결 방법을 다음과 같이 정리했다.
*본 강좌를 다 쓴 후에 공식 문서를 찾아보면 이미 공식 데모가 있다는 것을 알 수 있다. [얼굴 가리기]하지만 공식 문서에 숨겨진 것은 발견하기 어렵다. ->동적 증감표 항목을 참고하고 나의 방법은 더욱 간결하고 최적화되었다.
우선 순환표 항목이 검증되기 전의 코드가 없습니다.

/* eslint-disable */
export default {
  data() {
    return {
      form: {
        activityName: '',
        status: '1',
        productGroup: [{num:"",price:""}]
      },
      rules: {
        activityName: [
          { required: true, message: '       ', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    deleteLadder(index)
    {
      if(this.form.productGroup.length>1){
        this.form.productGroup.splice(index,1);
      }
    },
    addLadder()
    {
      this.form.productGroup.push({num:"",price:""});
    },
    submitForm(formName)
    {
      this.$refs[formName].validate((valid,obj) => {
        if (valid) {
          this.submitFormAction();
        } else {
          this.$message.error("     ");
        }
      });
    },
    submitFormAction()
    {
      this.$message.success("    ");
    },
    resetForm(formName)
    {
      this.$refs[formName].resetFields();
      this.form.productGroup = [{num:"",price:""}];
    }
  }
}

먼저 일반 규칙 추가와 마찬가지로 rules 규칙을 추가합니다.

productGroupRules: {
  productGroupNum: [{required: true, message: '       ', trigger: 'blur'}],
  productGroupPrice: [{required: true, message: '       ', trigger: 'blur'}]
}

그런 다음 양식 항목에 유효성 검사를 추가합니다.

여기:rules는 모든 폼 항목을 추가하고 여러 개가 있으면 productGroupRules.productGroupNum라는 형식으로 구분하여 위productGroupRules의 내용에 대응한다.
또 주로:prop인데 정상검증표 항목은prop이고 여기는:prop이다.:prop="`productGroup.${index}.num`"는 조립 형식(이곳은 북월무사의 건의에 따라 수정되었습니다. 북월무사에게 감사합니다)이다. 앞에는 v-for가 귀속된 수조, 가운데는 수조 인덱스index, 마지막에는 표항이 귀속된 v-model의 명칭을 점.으로 연결한다.이 세 가지는 모두 정확해야 하며, 틀린 것은 하나도 검증할 수 없다.또한 "`productGroup.${index}.num`" 여기는 ` 단인용이 아니라 ' 단인용이기 때문에 주의해야 한다. 이것은 ES6 템플릿 문자열의 사용법이기 때문이다.
또한 v-for에 귀속된 수조도form 대상에 귀속되어야 하며 위의data에 주의해야 한다.

form: {
  activityName: '',
  status: '1',
  productGroup: [{num:"",price:""}]
}

예:

form: {
  activityName: '',
  status: '1'
},
productGroup: [{num:"",price:""}]

검증할 수 없는 점도 주의해야 한다.
자, 이상은 vue에서 Element 구성 요소를 사용할 때v-for 순환하는 폼 항목 검증을 해결하는 해결 방안입니다. 이 문제에 부딪힌 학생들에게 도움이 되었으면 합니다.