Vuetify 구성 요소에서 오류를 캡처하는 더 좋은 방법이 있습니까?

Question

Vue.js 라이브러리 Vuetify를 사용하여 내가 만든 구성 요소 내부에 몇 개의 텍스트 필드 구성 요소를 추가하고 있습니다. 입력 유효성 검사를 제공하기 위해 텍스트 필드 구성 요소의 hasError 속성을 캡처하고 싶습니다. 나는 재산의 길이는 this.$children[3]._computedWatchers.hasError.active임을 안다. 그러나 이러한 속성에 액세스하는 또 다른 방법이 있는지 알고 싶습니다. 어쩌면 내가 뭔가를 놓친거야?

다음

<v-text-field 
    ref="password-confirmation" 
    name="new-user-password-confirmation" 
    label="Confirm Password" 
    type="password" 
    single-line 
    required 
></v-text-field> 

당신이 너무 좋아 (속성 및 방법과 함께) Vuetify 텍스트 필드 구성 요소의 VueComponent 인스턴스를 참조 할 수 있습니다 :

<template> 
    <div class="register"> 
    <form> 
     <div> 
     <v-text-field name="new-user-email" 
         label="Email" 
         type="email" 
         single-line 
         required></v-text-field> 
     </div> 
     <div> 
     <v-text-field name="user-user-password" 
         label="Password" 
         type="password" 
         single-line 
         required> 
     </v-text-field> 
     </div> 
     <div> 
     <v-text-field name="new-user-password-confirmation" 
         label="Confirm Password" 
         type="password" 
         single-line 
         required> 
     </v-text-field> 
     </div> 
     <div @click="registerNewUser"> 
     <v-btn>Register</v-btn> 
     </div> 
    </form> 
    </div> 
</template> 

<script> 
export default { 
    name: 'register-new-user', 
    data() { 
    return { 
     checked: false 
    }; 
    }, 
    methods: { 
    registerNewUser() { 
     console.log(this.$children[3]._computedWatchers.hasError.active) 
     console.log('Register a new user') 
    } 
    } 
}; 
</script> 

Answer 1

이 같은 v-text-field 구성 요소에 ref 속성을 추가

을

methods: { 
    registerNewUser() { 
    console.log(this.$refs['password-confirmation'].hasError) 
    } 
} 

Here's documentation on refs.