vee-validate scoping for components not working with bootstrap-vue

Versions

• vee-validate: 2.1.7
• vue: 2.5.22

Describe the bug Using vee-validate on an application together with bootstrap-vue. Yes, fieldsBagName is changed using:

Vue.use(VeeValidate, { inject: true, fieldsBagName: 'veeFields' });

Having a b-tabs with a component inside each b-tab. Each tab has forms with a common scope. The validation works great inside the component itself but outside using e.g. errors.any('salary'), there is no reaction. If i log errors i can see salary in the result:

{ "vmId": 346, "items": [ { "id": "61", "vmId": 381, "field": "salary.baseSalary_0", "msg": "The salary.baseSalary_0 field is required.", "rule": "required", "scope": "salary" }, { "id": "62", "vmId": 381, "field": "salary.taxTable_0", "msg": "The salary.taxTable_0 field is required.", "rule": "required", "scope": "salary" } ] } Why is this?

using validator.validate() does not trigger the validation inside each component either.

[logaretm]

Sorry for being late to respond, the problem is when using a component based UI library, that the $validator injection will not work properly because the entire component tree can provide their own validator instances. there is a way to resolve that:

• Disable automatic injection using { inject: false } when configuring vee-validate.
• Add $_veeValidate config object on the component that will serve as the validation context (or root form), with a validator prop set to 'new'.

  $_veeValidate: {
    validator: "new"
  },

What all of this does, is that it makes the validation context component is the only validator instance provider, forcing the children to only inject from it.

Here is an updated example

This is documented in the same link I provided.

In v3 I will make this much simpler to do.

[rajesh1211]

Thanks @logaretm For this, there was a reason we were using vee-validate 2.0 is this was causing issue with bootstrap vue.