我的问题是,当我尝试在我的系统上使用 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
而仅在最后一步。
的出现是由于 Vue.js 使用的"就地补丁"策略。VeeValidate 文档中描述了这种情况。基本上,你需要告诉 Vue.js 通过为每个输入元素的 key 属性设置唯一值来单独跟踪所有子组件:
<form-input key="unique"></form-input>
下面是一个有效的 JSFiddle 示例。
就我而言,它确实出现了,因为我的 HTML 根据特定条件动态渲染,并且我正在使用这段代码<div v-if="condition"... >
进行动态渲染。尽管我使用的是唯一键。
为了解决这个问题,我将v-if
更改为v-show
,就像这样<div v-show="condition"... >
,错误就消失了。
参考