在控制台中验证不存在的字段错误

Question

我的问题是，当我尝试在系统上使用 VeeValidate 验证我的字段时，出现此错误。

Uncaught (in promise) Error: [vee-validate] Validating a non-existent field: "". Use "attach()" first.
    at createError (vee-validate.esm.js?00d1:297)
    at Validator._handleFieldNotFound (vee-validate.esm.js?00d1:2282)
    at Validator.validate (vee-validate.esm.js?00d1:1959)
    at ScopedValidator.validate (vee-validate.esm.js?00d1:3276)
    at VueComponent.next (QueryAcademicForm.vue?f0b2:332)
    at click (eval at ./node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-e5b3dc5a","hasScoped":false,"transformToRequire":{"video":["src","poster"],"source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./src/components/QueryAcademicForm.vue (0.3f605440c8faec0820bd.hot-update.js:22), <anonymous>:364:25)
    at invoker (vue.esm.js?efeb:2027)
    at HTMLButtonElement.fn._withTask.fn._withTask (vue.esm.js?efeb:1826)

我尝试在 jsfiddle 上复制它，它给了我同样的错误，但错误消息有一点不同

Uncaught (in promise) Error: [vee-validate] Validating a non-existent field: "result". Use "attach()" first.
    at Re (vee-validate.min.js:1)
    at vn._handleFieldNotFound (vee-validate.min.js:1)
    at vn.validate (vee-validate.min.js:1)
    at ln.validate (vee-validate.min.js:1)
    at a.validateBeforeSubmit ((index):355)
    at click (eval at $a (vue.min.js:6), <anonymous>:2:4043)
    at t (vue.min.js:6)
    at HTMLButtonElement.Ir.t._withTask.i._withTask (vue.min.js:6)

需要注意的一件事是，错误并不出现在

form-input

 组件的每个实例上，而仅出现在最后一步上。

Answer 1

该问题的出现是由于

Vue.js 使用的“就地补丁”策略造成的。 VeeValidate 文档 中描述了这种情况。基本上，您需要告诉 Vue.js 通过为每个输入元素的 key 属性设置唯一值来单独跟踪所有子组件：

<form-input key="unique"></form-input> 这是一个有效的

JSFiddle 示例。

Answer 2

在我的例子中，它确实出现了，因为我的 HTML 是根据特定条件动态渲染的，并且我正在使用这段代码

<div v-if="condition"... >

 进行动态渲染。尽管事实上我使用的是唯一的密钥。

为了解决这个问题，我将

v-if

 更改为 

v-show，如下所示 <div v-show="condition"... >

，错误就消失了。

参考

Answer 3

在 v-show 专有视频中出现错误，在尼韦尔视觉效果中单独禁运，您需要在配方中进行程序。 Podrías 采用

required de una 变量，es decir:

<v-text-field v-show="VoBo" name="noVoBo" v-model="nomVoBo" label="Nombre:" v-validate="requeridoTF" :error messages="errors.collect('noVoBo')"> </v-text-field> Donde

requeridoTF Fue declarado comovariable vacía pero que en finitado momento le asignas el valor 'required', en mi caso desde watch asi:

watch: { VoBo(val){ if (val == false) { this.requeridoTF = '';} else{ this.requeridoTF = 'required';}}

VoBo 无法检查是否使用 saber si muestro 或 no el componente。