this$1.vm.$el.querySelector is not a function

[uoziod]

Versions:

• VueJs: 2.3.3
• Vee-Validate: 2.0.0-rc.18

Description:

Some of the validating forms of my app are dynamically embedded on pages. Thus, in some cases, the template of the component containing form could not be rendered yet, and hence it's template it's just an empty comment element. And once v-validate.initial confirmed relates to some element of the form, the library tries to find such element... in the comment, with querySelector. Where comment element doesn't have such method.

Finally, we end up with:

TypeError: this$1.vm.$el.querySelector is not a function
    at vee-validate.esm.js:4065
    at Array.forEach (<anonymous>)
    at Field.updateDependencies (vee-validate.esm.js:4047)
    at Field.update (vee-validate.esm.js:3943)
    at new Field (vee-validate.esm.js:3833)
    at Validator.attach (vee-validate.esm.js:4650)
    at bind (vee-validate.esm.js:5374)
    at callHook$1 (vue.esm.js:5855)
    at _update (vue.esm.js:5780)
    at Array.updateDirectives (vue.esm.js:5761)

Solution:

Just wrap:

    if (!el) {
      el = this$1.vm.$el.querySelector(("input[name=\"" + selector + "\"]"));
    }

In try/catch too, just like it's done for the previous querySelector call:

    if (!el) {
      try {
        el = this$1.vm.$el.querySelector(("input[name=\"" + selector + "\"]"));
      } catch (err) {
        el = null;
      }
    }

[logaretm]

Thanks for reporting this and providing a solution. closed in 0e61737