有没有更好的方法从 Vuetify 组件中捕获错误？

Posted 2023-02-22

【中文标题】有没有更好的方法从 Vuetify 组件中捕获错误？

【英文标题】：Is there is a better way to capture erros from Vuetify components?

【发布时间】：2017-09-03 03:39:58

【问题描述】：

我正在使用 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>

【参考方案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.

【讨论】：

非常好，这正是我想要的。非常感谢。

由于某种原因使用...hasError.active 会产生未定义的错误。 hasError 可以正常工作。

是的，它只是属性名称。我更新了答案