$setValidationErrors not updating view

[leemason]

great package, im just trying to reduce duplication in my code right now, and currently i have 2 sets of errors in the view.

1. the errors returned via a post request when the forms submitted
2. the errors provided by this package.

naturally im trying to reduce this down to one master "error in errors" template to prevent this:

<template v-for="error in errors.email">
    <span class="mdl-textfield__error">@{{ error }}</span>
</template>
<template v-for="error in $login.email.errors">
    <span class="mdl-textfield__error">@{{ error.message }}</span>
</template>

and instead just have:

<template v-for="error in $login.email.errors">
    <span class="mdl-textfield__error">@{{ error.message }}</span>
</template>

in the promise returned from server ive added the $setValidationErrors() function call as described in the docs:

//map server provided errors to the validation object (our server returns a simple array of messages so we need to format it correctly for the validator)
var errors = [];
response.data.errors.email.forEach(function(error){
    errors.push({field: 'email', message: error});
});
this.$setValidationErrors(errors);

//this is the data im trying to eliminate from the view and how they are currently sent back
this.errors.email = response.data.errors.email || [];

only problem is this isnt updating the view with the errors?

done a bit of debuging and it seems the data i pass IS being added to the correct locations (under errors, and under each fields errors object which can be seen by adding this to the template:

{{$login | json}}

so what am i doing wrong?

i can see from the debugging the pristine, modified, etc variables all seem to be set as if the validator hasnt tried to perfom validation yet after the ajax request. i suspect the validator resets itself after passing and adding the errors at this point simply adds them as data and not passes them to the view?

any help would be gratefully recieved, i love this plugin and hope it can work in this way.

[kazupon]

Thank you for reporting!!

Can you provide the minimum reproduction code with jsfiddle please ?

[leemason]

Ive created a fiddle, however its not quite behaving the same as my actual code, as im getting errors even before the problem im having.

the fiddle is setup to simply add errors via the this.$setValidationErrors(); call, but strangly jsfiddle is reporting that function is undefined???

also the "pre" response validator errors arent even showing up in the dom, which IS working on my project.

I can tell the validation is happening as the login button is disabled until a valid email and min 6 char password is added, and the errors can be seen using {{ $login | json }}.

im more of a php guy so cant be sure if the jsfiddle problems are because of me, or what.

It shows what im trying to do but could be confusing.

in jsfiddle = $setValidationErrors is failing (works on my project)

in my project $setValidationErrors is not failing, but the new error messages arent being reported to the dom.

does that make sense?

https://jsfiddle.net/2p2tyjLd/26/

[kazupon]

Thank you for your jsfiddle code providing !! I checked your code.

the fiddle is setup to simply add errors via the this.$setValidationErrors(); call, but strangly jsfiddle is reporting that function is undefined???

Hmm ... Jsdeliver is strange ... https://cdn.jsdelivr.net/vue.validator/2.0.0-alpha.21/vue-validator.min.js jsdelivr is delivering the v2.0.0-alpha.20 as it should be v2.0.0-alpha.21 ...

I forked your jsfiddle, and I fixed. https://jsfiddle.net/kazupon/rv83j7Lt/7/

only problem is this isnt updating the view with the errors?

I also confirmed the your reporting issues at the above forked jsfiddle code. I think that the behavior of matrial.js is affecting the vue-validator. By the inspect element of brower debugging tools using, You can check the error message that is rendered with v-for. (When you remove the mdl-textfield__error, You can confirm it)

To avoid this issues, I found the error message is rendered correctly by using validator-errors component. https://github.com/vuejs/vue-validator#error-message-enumeration-component

I recommend the it use.

[leemason]

appologies, yes it was some stylign within the css hiding the errors, thanks for your help.