Gibt es eine bessere Möglichkeit, Fehler von Vuetify-Komponenten zu erfassen?

Question

Ich benutze die Vue.js-Bibliothek Vuetify, um einige Textfeldkomponenten innerhalb einer von mir erstellten Komponente hinzuzufügen. Um eine Eingabevalidierung bereitzustellen, möchte ich die hasError Eigenschaft der Textfeldkomponenten erfassen. Ich weiß, dass der Weg der Eigenschaft ist: this.$children[3]._computedWatchers.hasError.active. Aber ich würde gerne wissen, ob es einen anderen Weg gibt, auf diese Eigenschaften zuzugreifen. Vielleicht vermisse ich etwas?

<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

hinzufügen ref Attribut auf die v-text-field Komponente wie folgt aus:

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

Dann können Sie die VueComponent Instanz der Textfeldkomponente Vuetify Referenz (zusammen mit seinen Eigenschaften und Methoden) wie folgt:

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

Here's documentation on refs.