vue.js - 如何检查来自子组件的输入是否为 $invalid

Question

我需要验证来自子组件的一个输入是否有效。但我不知道如何从父亲组件中做到这一点。

我有一个包含多个字段及其验证的表单，为了简化，我将每个输入字段和他的验证移到他自己的组件中。但现在我需要一起验证所有这些。

我怎样才能做到这一点？

我将现场示例放在代码沙箱上：

https://codesandbox.io/embed/vuetify-playground-o7kbr?fontsize=14

Answer 1

引用输入

<input-cpf ref="input" label="CPF" :cpf.sync="cpf"/>

然后您可以从父级访问组件

this.$refs.input.$v.$touch();
if ( this.$refs.input.$v.cpf.$invalid ) {
    console.log('não esta pronto para enviar')
} else {
    console.log('pode enviar')
}