vue.js - Is there is a better way to capture erros from Vuetify components? -
i'm using vue.js library vuetify add few text field components inside on component create. in order provide input validation capture haserror property of text field components. know path of property is: this.$children[3]._computedwatchers.haserror.active. know if there way access theses properties. maybe i'm missing something?
<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 new user') } } }; </script>
add ref attribute v-text-field component this:
<v-text-field ref="password-confirmation" name="new-user-password-confirmation" label="confirm password" type="password" single-line required ></v-text-field> then can reference vuecomponent instance of vuetify text field component (along properties , methods) so:
methods: { registernewuser() { console.log(this.$refs['password-confirmation'].haserror) } }
Comments
Post a Comment