My problem is I am getting this error when I try to validate my fields with VeeValidate on my system.
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)
I tried to replicate it here on jsfiddle, it gives me same error but there is little bit difference in error message
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)
One thing to notice that error is not on every instance of form-input component rather only on the last step.
The issue appears due to "in-place patch" strategy that Vue.js uses. This case is described in the VeeValidate documentation. Basically, you need to tell Vue.js to track all child components separately by setting unique value to the key attribute for each input element:
<form-input key="unique"></form-input>
Here is a working JSFiddle example.