In case when we have specific components hierarchy and behavior, validator rules works incorrectly.

Versions:

• VueJs: 2.5.13
• Vee-Validate: 2.0.3

Description:

In case when we have specific components hierarchy and behavior, validator rules works incorrectly.

Steps To Reproduce:

FIDDLE Place a cursor to field, and enter characters one by one, and when you enter 6th char, field still invalid. But when you enter 7th char - field goes valid. Also, if you would remove chars one by one, field becomes invalid only when there remaining 4 chars. But I was set a rule v-validate="'min:6'"

description:

1. comp - just wrapper over <input> which emits “input” event and has ‘value’ prop
2. comp - input element which gets object as a ‘value’ prop, copies it to data.item, passes one of object’s prop to child №1 component as :value, and listens to ‘input’ event from child №1 component, then updates own data.item object with new prop value, then emits ‘input’ event with updated data.item object
3. comp has data.value object, and passes it as v-model to child №2 component.

Also, if I place a console.warn into node_modules/vee-validate/dist/vee-validate.esm.js locally

var min$1 = function (value, ref) {
  var length = ref[0];

  if (value === undefined || value === null) {
    return false;
  }
    console.warn(value);
    return String(value).length >= length;
};

I get two logs in console, first has new value, but second has prev value, so validator validates field twice, but because of smth, it tries to validate old value in second time.

[AGrinx]

+1 to this problem. For me, the validation fires twice: As I saw, the second time this fires here:

/// vee-validate.js lines(5695-5711)
//5695 if there is a watchable model and an on input validation is requested.
  if (this.model && events.indexOf(inputEvent) !== -1) {
    var debouncedFn = debounce(fn, this.delay[inputEvent]);
    var unwatch = this.vm.$watch(this.model, function () {
        var args = [], len = arguments.length;
        while ( len-- ) args[ len ] = arguments[ len ];

      this$1.flags.pending = true;
      debouncedFn.apply(void 0, args);
    });
    this.watchers.push({
      tag: 'input_model',
      unwatch: unwatch
    });
    // filter out input event as it is already handled by the watcher API.
    events = events.filter(function (e) { return e !== inputEvent; });
  }

But I don’t use an debounce in this validation. Maybe It can be a hint for solving…

I looked the FIDDLE of @xodock and it works correctly only on version rc-27, but any next version breaks the fiddle.

For now I rolled back to rc-27. 😦

[logaretm]

VeeValidate 3.0 has been released with a new approach, this is sadly no longer applicable.

The new version has a lot of breaking changes, so make sure to read the new documentation carefully!