Question

如何使用Vuelidate处理父组件内部嵌套组件的验证？如果子组件中的输入有效或无效，我想更改parentForm.$invalid。

父母：

<parent-component>
  </child-component-1>
  </child-component-2>
</parent-component>

validations: {
  parent: WHAT HERE?
}

Child-1

<child-component-1>
  </some-input>
</child-component-1>

data() {
  return {
    someInput: ""
  };
},

validations: {
  someInput: required
}

Child-2

<child-component-2>
  </some-input>
</child-component-2>

data() {
  return {
    someInput: ""
  };
},

validations: {
  someInput: required
}

Answer 1

我可能不是Vue的专家。如果您在子组件中声明了验证，并且想从父组件访问它，则可以使用这种方式从父组件中引用子组件。

在父组件中，就像

<template>
<my-child ref="mychild"> </my-child>
</template>

您可以使用以下命令访问在my-child组件（即$ v对象）中声明的验证：

this.$refs.mychild.$v

，然后您可以轻松地在父组件中使用子组件的验证。希望这会比使用复杂的方法使工作容易得多，并且对我有用。

Answer 2

开始使用 vuelidate 的子组件/表单的最简单方法是使用provide/inject对提供的Vue.js依赖项注入机制。在父组件中创建的$v实例可以与子组件共享。

当您对其进行微调时，可以使用Vuelidate data-nesting并将仅$v的子集传递给子组件。这与Angular处理嵌套表单的方式大致相似。看起来像这样：

export default {
    data() {
        return {
            form1: {
                nestedA: '',
                nestedB: ''
            } /* Remaining fields */
        }
    },
    validations: {
        form1: {
            nestedA: {
                required
            },
            nestedB: {
                required
            }
        },

        form2: {
            nestedA: {
                required
            },
            nestedB: {
                required
            }
        }
    }
}

或者，您可以为每个组件声明$v的独立实例。在您的情况下，您将有一个家长陪同，两个孩子陪同。当您单击“提交”按钮时，请使用$refs获取子组件的引用，并检查子组件中的嵌套表单是否有效。

审核：使用子组件验证表单

2 个答案: