Any experience with vue-flatpickr?

[lucianobosco]

I'm using vee-validate V3. When v-model is hydrated via axios, the pristine flag from validationObserver is set to true.
This is only happening with this input, probably because is doing something under the hood.

I'm trying to use nextTick after data is fetched but no luck so far

this.$nextTick(() => {
         this.$refs.form.reset()
})

Any advice will be really appreciated.

[logaretm]

Feel free to create a sample on codesandbox and I will take a look.

[lucianobosco]

@logaretm this is a basic sample: https://jsfiddle.net/luchorengo/cL9dtvym/21/
Play by commenting/uncommenting the this.setDate() call in mounted hook and you will see what am I talking about.
Just thinking out loud but I bet that vue-flatpicker is doing something under the hood like setting a hidden input, therefore vee-validate is detecting that change.

[logaretm]

Trying using requestAnimationFrame instead of $nextTick to reset the form, $nextTick doesn't always work well with flushing the VNode UI updates with libraries like these

this.setDate();
requestAnimationFrame(() => {
  this.$refs.observer.reset();
});

[lucianobosco]

Awesome! It works like a charm, not completely sure what am I doing but it solved my issue.
I think that for a final solution I will have to contact the library owner. I didn't see other timepicker libraries with this issue, but since this one is the most complete I will implement your solution.
Thanks! Feel free to close the discussion

[logaretm]

Copied the answer from a reply:

Trying using requestAnimationFrame instead of $nextTick to reset the form, $nextTick doesn't always work well with flushing the VNode UI updates with libraries like these

this.setDate();
requestAnimationFrame(() => {
  this.$refs.observer.reset();
});