Vee-validate: Validate doesn't work in v-for

[murpzhu]

Versions:

• VueJs: 2.1.10
• Vee-Validate: 2.0.0-beta.22

Description:

v-validate doesn't work on 2.0.0-beta.22

Steps To Reproduce:

I prepared https://jsfiddle.net/hf96yxxy/4/ using 2.0.0-beta.22, when the Name is empty, shows no errors.
It does show error on 2.0.0-beta.21, but it cannot parse the index

[logaretm]

This is currently a bug, basically it tries to resolve the v-model, but the model does not exist on the instance , just inside the loop, so it doesn't detect it properly.

previous versions should work fine for this use case. see here #270

[pavel-mironchik]

I think it is the same as #270
Last changes broke validation within v-for. I fixed my project at beta1821 and wait for good news.

[murpzhu]

@brunen9 Would appreciate your help if you can share how it works at beta 18

[pavel-mironchik]

@murpzhu my apologies, I was wrong with version. Have look to my package.json and realized that I use beta 21. Validation within v-for works in this version. Do you still need an example of code?

[murpzhu]

@brunen9 I have tried beta21 in https://jsfiddle.net/hf96yxxy/7/.
But when the input set to empty, the index didn't get parsed "msg": "The 'name'+index field is required."
And the context in

didn't appear.

[logaretm]

@murpzhu you need to bind the name so it interpolates the index correctly: https://jsfiddle.net/hf96yxxy/8/

[pavel-mironchik]

Yeah, I remember the "The ... field is required" message in console...
I use :data-vv-name="'line_price_' + index">

[murpzhu]

Thanks, it works now.

[shredding]

Hm, I'm stuck at the same problem but I do not even get this message in the console.

Validation just does not kick in (errors array remains empty), even though my code is somewhat exactly like the fiddle (i tried the thing with the index as well, but it didn't work either and shouldn't be different):

<div class="entry" v-for="item in filteredMapping">
  <label>{{ item.key }}</label>
  <input v-validate="'required'" :data-vv-name="item.key" data-vv-delay="500" type="text" class="form-control" v-model="item.value">
  <i v-show="errors.has(item.key)" class="fa fa-warning"></i>
  <span v-show="errors.has(item.key)" class="help is-danger">{{ errors.first(item.key) }}</span>  <br>
</div>

Any ideas where I went wrong?

[pavel-mironchik]

@shredding what version do you use?

[shredding]

Here's the excerpt from my package.json:

"dependencies": {
    "vee-validate": "^2.0.0-beta.22",
    "vue": "^2.1.0",
    "vue-head": "^2.0.10",
    "vue-router": "^2.2.0",
    "vuex": "^2.1.1"
  }

[pavel-mironchik]

@shredding as I know, in 22beta vee-validate treat a v-model bounding as the arg, but item.value doesn't exist in the Vue data, may be this is the cause of your problem, see discussion at #270
As I said previously in this thread - I just fixed at 21beta, in wich validation within v-for works well.

[shredding]

I'm not really sure I'm getting that ...

You mean that in order for the binding to work, i need to have the variable that I have in v-model declared in the data func of my component? (That would be a bit complicated in my case as I try to have things a little abstracted here, as I'm generating a dynamic form).

[pavel-mironchik]

@shredding yes, you understood right. For me the workaround is to use 21beta, it works well. But I use custom component within v-for cicle. In your case this wouldn't help, I afraid, cause there is another issue of resetting input fields (which also was described in #270).

[shredding]

@brunen9 : I rolled back to 21beta and now it started working. Thanks for your support!

However, is that something that is going to break on final release or is it a known bug that'll be fixed in the final version?

If there's anything I can help with (though I'm more of a backend guy), I'm happy to do so.

[logaretm]

@shredding The problem is, think of it from the perspective of a directive, how am I going to know if the expression bound is actually an iterator from v-for, I don't think there is a way to know for sure, so I will instead try to detect if the model is bound to something that is not in the instance scope, since you shouldn't name an iterator the same name as a model on the instance.

and it is a known bug and should be fixed in the next beta.

[logaretm]

Done some manual testing, seems to be resolved, will tag the next release after trying few more things.

[patrickryan79]

This issue seems to have reappeared in RC7. Rolled back to RC5 and it's working again. My use case is v-for for a radio button group. Loving VeeValidate. Thanks for all you do!

[ksetrin]

Look at this example https://jsfiddle.net/gznfro7y/
V-for render 2 inputs with empty value in each other. Array of errors are empty while inputs not blured.
How to fix it?

[logaretm]

@ksetrin not sure I understand the issue, validation occurs after blur not before, so whats wrong here?

[ksetrin]

@logaretm yes, you're right. It's my mistake. Some fields on the page are filled by chrome password manager (and imitate blur action). I can't understand why some fields are validating and other not validating (before blur). Thank you for the answer

[maksnester]

So, what is the recipe for fixing this situation now?

I still have this bug in "vee-validate": "^2.0.9". I use custom component inputs inside v-for. And models are bounded like v-model="myDataField[$index]" in that way validation doesn't work, I can only enable some manual validation with help from events like:

@input="$validator.validate(`field${index}`)"
@blur="$validator.validate(`field${index}`)"

But I still didn't figure out how to validate in v-for without manual validate.

[Issabln]

@Alendorff How extactly did you manage this to work? Do you have an example?

[maksnester]

@Issabln at least it works with manual event handlers just like I posted above.