element-ui 대화상자 기반el-dialog 초기화 검사 문제 해결

페이지를 새로 고치지 않고 el-dialog를 다시 열 때, rules나 어떤 값을 연결하려면required가 필요합니다. 자동으로 검사됩니다.
여러 개의 블로그를 살펴본 결과, 자주 사용하는 두 가지 해결 방법이 발견되었습니다(아래 방법은 다른 블로그에서 볼 수 있으며, 더 이상 자세히 쓰지 않습니다. 필요하면 직접 문의하십시오).
1. dialog에 v-if를 씌우기;
2. dialog를 닫을 때, 감청 닫기 리셋, 검사 지우기.
나는 자신의 프로젝트에서 상술한 두 가지 방법을 사용했는데 모두 그다지 좋지 않아서 스스로 다른 방법을 생각해 냈다.


dialog에서 열린 리셋 호출

methods:
 
openDialog(){
  this.$nextTick(() => {
    this.$refs.dataForm.clearValidate();
  })
}

다이얼로그를 초기화할 때 변경된dom를 가져와 지우기 검사를 진행합니다
보충 지식: Cannot read property'resetFields'of undefined 문제 및 인용
문제 설명: 엘리먼트를 사용하여 나의 백그라운드 시스템을 개발하고 같은 팝업 상자를 편집하고 추가했습니다.
데이터 데이터의 commentForm 개체 바인딩
새 팝업 상자에서 폼을 비우기 위해this.$를 사용했습니다.refs[formName].resetFields()
매번 새로 추가된 팝업 상자를 클릭할 때마다 오류가 발생합니다
"[Vue warn]: Error in event handler for "click": "TypeError: Cannot read property 'resetFields' of undefined""
문제의 원인:
mouted가table 데이터를 불러온 후, 숨겨진 팝업 상자는dom에 컴파일되지 않았습니다.
그래서 @click="dialogFormVisible=true;resetForm('dlgForm')"click이 튀어나왔을 때 $refs가dom 요소를 가져오지 못해'resetFields'of undefined
해결 방법:
1、($nextTick dom 다음 업데이트 후)

      resetForm(formName) {
        this.$nextTick(()=>{
          this.$refs[formName].resetFields();
        })        
      },

2. (첫 번째라면 추가를 클릭하면reset이 필요 없고 원소undefined에 따라 판단)

        if (this.$refs[formName] !== undefined) {
          this.$refs[formName].resetFields();
        }

참고 사항: DOM의 일련의 js 작업은 Vue에 넣는 것이 좋습니다.nextTick()의 콜백 함수
이상의 엘리먼트-ui 대화상자el-dialog를 바탕으로 초기화된 검사 문제 해결은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 참고도 해주시고 저희를 많이 사랑해 주시기 바랍니다.