element-ui 폼은 백그라운드에 따라 데이터를 되돌려 지정한 필드에 오류 정보를 제시합니다.

오늘 element-ui 폼을 사용하여 등록, 로그인 기능을 하려면 백그라운드에서 되돌아오는 데이터, 예를 들어 되돌아오는 오류 알림, 해당하는 필드에서 알림을 해야 한다. 예를 들어 인증 코드 오류 등이다.
element-ui의form-item에는 오류 정보를 설정할 수 있는 오류 속성이 있습니다. 인터페이스에서 정보를 되돌린 후에 오류 정보를 설정합니다.
다음과 같은 양식이 있습니다.

인증 코드 설정 error='errorMsg'(errorMsg가 데이터에 정의됨)
백그라운드 데이터 반환 후 진행
this.erroMsg = res.data.message
문제는 제출을 클릭하면 처음으로 오류 메시지가 나타날 수 있지만 나중에 클릭하면 나타나지 않는다는 것이다.
해결 방법:
먼저 errorMsg를 null로 설정하고this.$를 사용합니다.nextTick(() => {this.erroMsg = res.data.message}) 

 

해결 방법은 다음 블로그에 참여합니다:elementform 폼 구성 요소 중복 오류 알림이 표시되지 않습니다

=========================== 분할선 ==============================
앞말
당사는 이미 여러 개의 백그라운드 프로젝트를 겪었습니다. 로그인 페이지에 작은 문제가 있습니다. 만약에 로그인이 잘못되었고 처음으로 오류를 제시한 다음에 같은 단추를 누르면 오류 알림은 사라지고 같은 오류를 반복하지 않습니다.
나중에 element의 원본 코드를 뒤져서 el-form-item의 error 속성을 감청하는 것은 watch 방법이다. 즉, 두 번 반복된 오류 조작이다. 제시된 오류 정보가 일치하면 워치 방법을 촉발하지 않는다.나의 논리는 이렇다. 매번 로그인을 클릭하거나 인증 코드를 보낼 때마다 폼을 재검증하고 검증이 통과되어야 로그인이나 인증 코드 요청을 보낼 수 있다.그러나 Element 폼 구성 요소는 폼 검증이 통과되면 원래의 오류 알림 정보를 삭제하도록 규정했다. 이로 인해 두 번째 클릭으로 로그인하거나 인증 코드를 보내게 되었고 원래의 오류 정보는 제거되었고 두 번의 오류 정보는 일치하여 촉발할 수 없었다watch 방법은 새로운 오류 정보를 다시 과장하지 않았다.
수다스럽게 말하는 것 같지만 그 원인은 분명히 표현해야 한다.
해결 방법

form validateerror와 함께 사용하는 것을 피하거나 if를 비어 있고 비합법적인 필드를 입력하는 것으로 판단하고 error를 사용하여 오류 정보를 제시합니다.아니면 form validate를 사용하지 말고 error

를 사용하지 마세요.

이 문제를 복구하기 위해 vue $nextTick vm.$nextTick 을 사용하면 리셋을 다음DOM 업데이트 순환 이후로 연기할 수 있습니다.데이터를 수정한 후 바로 사용하고 DOM 업데이트를 기다립니다.우리는 오류 알림이 표시되지 않는 근본적인 원인이 watch 방법이 촉발되지 않았기 때문이라는 것을 안다.그러면 내가 매번 오류에 랜덤 값을 부여하고 vue $nextTick 를 사용하면 dom 업데이트된 후에 랜덤 값을 우리가 필요로 하는 오류 알림으로 바꾸면 되지 않겠습니까?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

let self = this;
self.$refs['loginForm'].validate((valid, fields) => {
  if (valid) {
    axios.post('/api/login', { email: 'xxx', code: 'xxx' }).then(res => {
      if (res.data.code === 0) {
        //  
      } else {
        //  
        self.errors.code = Math.random();
        self.$nextTick(() => {
          this.errTips.code = ' ，' + (res.data.msg ? '，' + res.data.msg : '');
        });
      }
    });
  } else {
    return false;
  }
});