VeValidate를 사용하면 필드가 터치되어 유효한지 어떻게 확인할 수 있습니까?

VeValidate를 사용하면 필드가 터치되어 유효한지 어떻게 확인할 수 있습니까?

계산 소품에서 검증 플래그를 액세스하려고 합니다.

computed: {
  isFormValid() {
    let isValid = this.$validator.fields.some(field => {
      console.log(field.flags);
      return field.flags.touched; || field.flags.invalid;
    });
    console.log("isValid", isValid);
    return isValid;
  }
},

그러나 이 경우 오류가 발생합니다."TypeError: this.$validator.fields.some is not a function"

그래서 난 그 때 내가 다시 한 번 생각해봤지observable:

let isValid = Array.from(this.$validator.fields).some(field => {
  console.log(field.flags);
  return field.flags.touched; //|| field.flags.invalid;
});

야호! 전진!에러는 없습니다.그러나 양식 입력 값을 변경해도 재계산되지 않습니다.

그럼 어떻게 해야 하죠?

v2 문서에서는 반복하는 예를 보여 줍니다.this.fields(의 일부this.$validator.fields)를 경유하는 방법:

// MyComponent.vue
export default {
  // ...
  computed: {
    isFormDirty() {
      return Object.keys(this.fields).some(key => this.fields[key].dirty);
    }
  },
  //...
}

이 예제를 사용하면 계산 프로포트는 다음과 같습니다.

// MyComponent.vue
export default {
  // ...
  computed: {
    isFormTouchedOrInvalid() {
      return Object.keys(this.fields).some(key => this.fields[key].touched || this.fields[key].invalid);
    }
  },
  //...
}

v2 데모

v3에서는 구성 요소를 사용하여 템플릿의 검증 플래그에 쉽게 액세스할 수 있습니다.

<ValidationProvider rules="required" v-slot="{ touched, invalid }">
  <pre>touched:{{touched}} invalid:{{invalid}}</pre>
  <input type="email" v-model="value">
</ValidationProvider>

v3 데모

언급URL : https://stackoverflow.com/questions/58185566/with-veevalidate-how-can-i-see-if-a-field-has-been-touched-and-is-valid