Vue, element-ui의resetFields() 메서드 재설정 폼이 잘못되었습니다.

질문:
this.$사용ref['form'] .resetFields()는 양식 항목을 재설정할 수 없습니다.
원인:
1. 폼에 ref 속성을 추가하지 않았습니다

2. 폼 항목el-form-item은prop 속성을 추가하지 않았습니다.prop 속성은 input 상자와 연결된 속성과 일치해야 합니다

<el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
 <el-form-item label=" " prop="name">
  <el-input v-model="sizeForm.name"></el-input>
 </el-form-item>
</el-form>

3. 이런 문제가 자주 발생하는 장면은 vuex를 사용할 때 새 폼과 편집 폼을 복원하는데 이때 상술한 속성과 방법이 추가되어도 폼을 지우는 효과에 도달하지 못한다는 것이다.
이제 엘리먼트-ui의 공식 문서를 다시 보도록 하겠습니다.
방법
설명
resetField
이 폼 항목을 초기화하고 검사 결과를 제거합니다.
clearValidate
이 폼 항목의 검사 결과 제거
중점:resetField () 방법은 폼을 비워 두는 것이 아니라 초기 값으로 초기화합니다.
따라서 우리가 새 폼을 열 때 폼 항목이 연결된 속성 값이 비어 있습니다. 폼을 제출한 후에 폼 항목이 연결된 값이 비어 있지 않습니다. 이 때 새 폼을 열면 지난번 값이 나타날 것입니다. 이 때resetField () 방법은 폼을 비울 수 없습니다. 이번 작업을 할 때 속성 초기 값이 비어 있지 않기 때문입니다.
해결 방법:
폼 제출 성공 후 귀속된 값을 리셋하는 방법

//   
resetForm () {
  return {
    remark: '',
    name: ''
  }
}
 
//   
submit () {
  //...... 
  let self = this
  let query = self.resetForm()
  self.updateForm({ // vuex action ， 
    form: query
  )}
  self.$ref['form'].resetFields()  //  resetFields() 
}

속성을 리셋한 후resetFields 방법을 실행합니다. 속성이 비어 있을 때 폼 규칙의 검증을 촉발할 수 있기 때문입니다. 이 때resetFields를 실행하면 검사 결과가 제거됩니다.
추가 지식: vue+element-ui this.$refs[‘‘].resetFields() 양식 데이터 재설정 시 문제가 발생하지 않습니다.
element의Form 구성 요소는 폼 검증 기능을 제공합니다. rules 속성을 통해 약속된 검증 규칙을 전송하고Form-Item의prop 속성을 검증할 필드 이름으로 설정해야 합니다.
주의할 점은 다음과 같습니다.
1. 대응하는 ref가 있어야 하며 이름이 일치하여 어떤 폼을 리셋하는지 표시합니다.
2.prop에서 설정한 필드 이름은 v-model에 연결된 필드 이름과 일치해야 합니다. 그렇지 않으면 폼을 재설정하거나 사용자 정의 검사 규칙을 실행할 때 적용되지 않습니다.
리셋 기능만 사용할 때 구체적인 검사 규칙은 입력할 필요가 없지만, 리셋할 필드는 반드시 대응하는prop이 있어야 합니다.
위의 Vue,element-ui의resetFields() 방법을 신속하게 해결하는 이 방법은 폼을 리셋하는 데 무효한 문제가 바로 편집자가 여러분에게 공유한 모든 내용입니다. 참고 부탁드리고 저희도 많이 사랑해 주세요.