是否有更好的方法来捕获 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.

是否有更好的方法来捕获 Vuetify 组件的错误？

Is there is a better way to capture erros from Vuetify components?

vue.js

vue-component

vuetify.js