요소 UI 자동 완성 구성 요소 및 양식 확인 충돌 : 양식 검증 실패의 문제를 해결하는 방법은 무엇입니까?

구성 요소 형식 검증 충돌을위한 요소 UI 자동 완성 솔루션

요소 UI의 el-autocomplete 구성 요소를 사용하는 경우 양식 검증 실패의 문제가 종종 발생합니다. 사용자가 드롭 다운 옵션을 선택하고 입력 상자에 올바른 값이 표시 되더라도 양식은 여전히 ​​채워지지 않은 양식을 프롬프트합니다.이 기사는이 문제를 분석하고 솔루션을 제공합니다.

문제 설명 :

이 양식은 el-autocomplete 구성 요소를 사용하여 사용자 이름 선택을 구현하고 el-form-item 및 prop 속성을 사용하여 확인합니다. el-autocomplete 의 select 이벤트는 사용자 선택 로직을 처리하는 함수를 바인딩합니다. 그러나 사용자가 선택한 후에는 양식 확인이 여전히 실패하여 "사용자 이름을 입력하십시오"라는 메시지를 표시합니다.

Code example:

구성 요소 코드 :

<el-form-item label="用户名" prop="username">
  <el-autocomplete :fetch-suggestions="querysearch" class="usernameinput" placeholder="选择或输入用户名" v-model="selectuserinfo">
  </el-autocomplete>
</el-form-item>

확인 규칙 :

 규칙 : {
  사용자 이름 : [{필수 : true, 메시지 : '사용자 이름을 입력하십시오', 트리거 : 'blur'}],
  비밀번호 : [{필수 : true, 메시지 : '비밀번호를 입력하십시오', 트리거 : 'blur'}]
},

관련 기능 :

 선택 (Params) {
  Console.log (this.selectuserinfo);
  this.loginform.username = params.username;
  this.loginform.password = atob (params.password);
},
onblur () {
  console.log ( 'blur');
  console.log (this.loginform.username, this.selectuserinfo);
  this.loginform.username = this.selectuserinfo;
},

문제 분석 및 해결책 :

문제의 근본은 this.loginform.username = params.username 이 Vue의 반응 형 메커니즘을 파괴 할 수 있다는 것입니다. VUE의 반응 형 시스템은 데이터 변경에 의존하여보기 업데이트를 트리거하고 확인을 양식합니다. 객체 속성을 직접 수정하면 VUE는 변경 사항을 추적 할 수 없으므로 업데이트 할 수없는 양식 확인을 초래합니다.

해결책:

1. loginform.username 응답 성 : loginform 일반적인 JavaScript 객체 인 경우 직접 할당이 VUE Responsive 업데이트를 트리거하지 않습니다. Vue.set 메소드 또는 객체 확장 연산자를 사용하여 loginform.username 업데이트하여 VUE가 데이터 변경을 추적하는지 확인하십시오.

    선택 (Params) {
     this. $ set (this.loginform, 'username', params.username); // vue.set을 사용합니다
     this.loginform.password = atob (params.password);
   }

   또는:

    선택 (Params) {
     this.loginform = {... this.loginform, 사용자 이름 : params.username}; // 객체 확장 연산자 this.loginform.password = atob (params.password);
   }

2. trigger 속성 확인 : trigger: 'blur' 트리거가 발생합니다. el-autocomplete 의 선택 작업은 blur 이벤트를 유발하지 않을 수 있습니다. trigger 속성을 'change' 으로 수정하거나 동시에 'blur' 및 'change' 사용하거나 실제 상황에 따라 적절한 트리거 이벤트를 선택해보십시오.

3. v-model 바인딩 및 loginform 초기화 확인 : v-model 바인딩 데이터가 정확하고 loginform 객체가 응답 형 객체로 올바르게 초기화되어 있는지 확인하십시오.

위의 방법을 통해 UI 요소는 폼 검증의 정확성을 보장하기 위해 요소 UI를 자동으로 완료하여 구성 요소 간의 충돌 문제를 해결할 수 있습니다.

위 내용은 요소 UI 자동 완성 구성 요소 및 양식 확인 충돌 : 양식 검증 실패의 문제를 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!