是否有更好的方法來捕獲Vuetify組件的錯誤？

Question

我正在使用Vue.js庫Vuetify在我創建的組件中添加一些文本字段組件。爲了提供輸入驗證，我想要捕獲文本字段組件的hasError屬性。我知道該物業的路徑是：this.$children[3]._computedWatchers.hasError.active。但我想知道是否有另一種方法來訪問這些屬性。也許我錯過了什麼？

<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

添加ref屬性爲v-text-field組件是這樣的：

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

然後，你可以參考Vuetify文本字段組件的VueComponent例如像這樣（其屬性和方法一起）：

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

Here's documentation on refs.