Vee-validate: Validation on custom component with after does not work properly

[simezi]

Versions

• vee-validate: 2.2.7
• vue: 2.6.10

Describe the bug

I've encountered 2 problems with my custom datepicker component with after rule.
Firstly, validation with after rule does not work until I change its value.
Secondly, when using cross-field validation, a field with after rule uses old value of a field with ref.

I found workaround for these problem that use $nexttick, but that is not a clean way.
Is there any way to avoid these ?

To reproduce
Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/xlwpx8xwqq?fontsize=14

first problem

1. Set startDate which is after endDate
2. Validation on endDate does not execute
3. Set endDate
4. Validation start to work

second problem ( after validation for endDate start to work)

1. Set startDate which is after endDate
2. There appears no error.
3. Set startDate which is after endDate again
4. There appears after error.

Demo link

https://codesandbox.io/s/xlwpx8xwqq?fontsize=14

[logaretm]

The first problem is by design, By default, vee-validate will not validate the target field unless both inputs have been interacted with by the user at least once. You can use .immediate modifier to force validation on mount.

As for the second problem, since vee-validate uses the value prop to validate, it sometimes gets behind in sync, since Vue applies updated asynchronously. Your workaround mitigates that with the next tick, a better approach tho is to add a $_veeValidate object on the component and handle value retrieval yourself like its being done with the Text input.

Instead of using a computed prop, I used the local component state to store the current input value in innerValue, then expose it after parsing to vee-validate:

  $_veeValidate: {
    name() {
      return this.label;
    },
    value() {
      return parse(this.innerValue);
    }
  },

Here is an updated example:

https://codesandbox.io/s/88pmwvqjz8

[simezi]

@logaretm

I understood the solution.
But I do not want to my small component like Date.vue in example to depend on vee-validate internally.
So, I decide to use nexttick solution.

Thanks for your advice anyway 👍

[logaretm]

@simezi I understand, you could take a look at ValidationProvider component. It doesn't have the shortcomings of the directive and solves a lot of issues.

[simezi]

@logaretm

Sorry for bothering you repeatedly.
I've tried ValidationProvider , and it almost worked.
But I found a little weird behavior.

Here is my sample code.
https://codesandbox.io/s/1r0kvz6v5j

When I change the value of Start Date , validation on Start and End works well.
However, When I change the value of End Date, It seems only validation on End Date works.
Is this an expected behavior?

[logaretm]

@simezi This is a bug, due to the order of the fields registering, I fixed this and it should be in the next release in a day or two.

[simezi]

I appreciate your great support.
Thank you so much ❤️