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

このようなv-text-fieldコンポーネントにref属性を追加します。

<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.