Is it possible to watch $validation?

[kzima]

@kazupon Great work with the vue-validator!

I was wondering if it is possible to make $validation.valid variable to be watched in the component.

I tried this:

watch: {
  '$validation.valid'(val) {
    console.log(val)
  }
}

but I get Error when evaluating expression "this.$validation.valid".

Do u have any workaround for this?

[kazupon]

Hmm, in currently, I have a no idea.

This behavior is occured, because vue-validator is defining the validation scope of vue-validator dynamically at the compilation. Also, The watch option is configured at vue instancing before than the compilation of vuejs.

vue-validator maybe support special option like watch option.

[kzima]

alternatively we can have some prop on the <validator> tag, maybe something like <validator :result.sync="syncedProp">.

This way we can watch syncedProp in the vue instance.

[lazabogdan]

@kzima You can use events https://github.com/vuejs/vue-validator#event

[kzima]

@lazabogdan thanks for suggestion, but this only works on the input level. I need to know when all my inputs within validator tag are valid.

[lazabogdan]

Right. But it could be solved with events only if the validator itself would emit a valid/invalid event for the entire instance. @kazupon what do you think?

[kazupon]

@kzima @lazabogdan Thanks !! These both approches seems like a good idea. :+1:

alternatively we can have some prop on the tag, maybe something like <validator :result.sync="syncedProp">.

I think that this approche user-friendly declarative interface like prop binding of component.

But it could be solved with events only if the validator itself would emit a valid/invalid event for the entire instance.

I think that this approch can program with javascript freedom.

I'll try to consider these. :smiley_cat:

[lazabogdan]

@kazupon In v2.0.0-alpha.16 you forgot somewhere a console.log which is rather annoying and since I'm using webpack-dev-server with hot reloading I'm getting a lot of these logs .. vue-validator.common.js:588 BaseValidation#manageElement $watch (3).

[kazupon]

Sorry ... Thanks your reporting!!

[szkrd]

Is this working? I have problems setting it up: https://jsfiddle.net/szabi/7t8g31je/1/