【问题标题】：vee-validate Validating a non-existing fieldvee-validate 验证不存在的字段
【发布时间】：2019-12-30 06:25:55
【问题描述】：

在验证一组字段时，对于隐藏在具有 v-if 属性的 DOM 中的字段会显示错误。

例如，我有 3 个字段：

<input name="foo" v-validate="'required'" />
<input name="bar" v-validate="'required'" />
<input v-if="showMe" name="foobar" v-validate="'required'" />

当我运行提交函数时，我正在检查所有字段是否包含错误：

this.$validator.validateAll().then(() => {
  ... my check
});

我看到以下错误：

Uncaught (in promise) Error: [vee-validate] Validating a non-existent field: "#3". Use "attach()" first.

在更新“showMe”状态时分离和重新附加“foobar”字段似乎很冗长。特别是对于我较大的多步表单。

有没有更简单的方法来防止出现此错误？

【问题讨论】：

用v-show代替v-if?
如果我使用 v-show，则“必填”验证会启动，我会看到一个错误，提示我尚未完成所有必填字段

标签： vue.js vee-validate

【解决方案1】：

如果你想对隐藏的输入进行验证，你只需要将字段的显示设置为无：

<input style="display: none">

这个方法对我来说很好用！

【讨论】：

【解决方案2】：

您需要将v-show 与动态应用的验证规则结合起来。这是您将规则作为对象传递的地方，第一个 key:value 是规则名称，如果需要，则为布尔值（可以与 v-if 布尔值相同）。

对于 VeeValidate 2（有问题的旧版本）

<input name="foo" v-validate="'required'" /> <br >
<input v-show="showMe" name="bar" v-validate="{required: showMe}" />

See Sandbox Example for VeeValidate2

对于 VeeValidate 3

<validation-provider rules="required">
    <input type="text" v-model="foo">
</validation-provider>

<validation-provider :rules="{required: showMe}">
   <input type="text" v-model="bar" v-show="showMe">
</validation-provider>

See Sandbox Example for VeeValidate 3.

【讨论】：