有没有更好的方法从 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.