Vee-validate: Failed watching path, watcher only accepts simple dot-delimited paths

[brainyl]

I have a form that is generated by iterating some values in an array. This requires me to bind my v-model using the current index of the displayed item i.e. formData[index]['url'].

The error is generated from the block of code displayed below which is as a result of the watcher trying to check for simple dot-delimited paths.
~~
if (arg) {
this.unwatch = this.vm.$watch(arg, function (value) {
this$1.vm.$validator.validate(this$1.fieldName, value, this$1.scope || getScope(this$1.el));
}, { deep: true });
return;
}
~~
Once I remove this block, everything works fine.

[logaretm]

I will try to disable v-model detection when the context is not watchable. Thanks for reporting this.

[brainyl]

Also, I must commend you for this great plugin, It is simply awesome!

[elijahiuu]

@logaretm, So what was done instead of v-model watching in this case? Did you attach el.addEventListener() ?

[logaretm]

@elijahiuu yep, it falls back to native event listeners if it cannot watch the model or find it.

[elijahiuu]

@logaretm I wonder if it's possible or safe to add reactivity trick on el.value itself?
Object.defineProperty(obj, key, { get: function()... set: function()... })
I was very confused about how to directly watch for model updates from within Directive's bind() functions, until I read VeeValidate source. Big thank you for that!!

[elijahiuu]

@logaretm I did something like this. It's not a very pleasant to deal with Directive 'api', but it works. I'm basically passing in the object that's being iterated within a v-for, and setting up a watcher via a function instead of dot notation.

<div v-for="n in myArray">
   <input v-model="n.firstName" v-my-directive="{watch: {scope: n, field: firstName}}">
</div>

if (binding.value.watch) {
  if (binding.value.watch.scope && binding.value.watch.field) {
     vnode.context.$watch(
       function() {
               return binding.value.watch.scope[binding.value.watch.field];
        },
        debouncedFn,
        {deep: true}
        )
    }
} else {
 // find v-model and do vnode.context.$watch(...)