kazupon / vue-validator

:white_check_mark: Validator component for Vue.js
MIT License
2.19k stars 431 forks source link

v-validate with v-for error #310

Closed kwzm closed 7 years ago

kwzm commented 7 years ago

The code is `

                                <label :for="'category_'+item.id">{{item.name}}</label>
                            </div>
                            <span class="error" v-if="$validation.category.required">请选择曲集类型</span>`

and the console is [Vue warn]: Error when evaluating expression "$validation.category.required": TypeError: Cannot read property 'required' of undefined

Please help me what is the problem? Thans a lot! ps:My English is poor @kazupon

kazupon commented 7 years ago

Sorry for the late response.

Maybe, In dynamic validation code generating with v-for, you need to use the field attribute. http://vuejs.github.io/vue-validator/en/syntax.html#attribute

kwzm commented 7 years ago

Sorry,I just see the reply. En,actually I don't understand your meaning. In fact,my example before already had the field attribute. <div class="category-box" v-for="item in allAlbumCategories"> <input type="checkbox" :id="'category_'+item.id" :value="item.id" v-model="postData.category_ids" initial="off" v-validate:category="['required']"> <label :for="'category_'+item.id">{{item.name}}</label> </div> <span class="error" v-if="$validation.category.required">请选择曲集类型</span> You can see the field is catrgory,so I can't understand your meaing. I think if you want me to use dynamic field attribute,but I don't know how to use. Or you refer to the other meaing. Looking forward to your reply. PS:If you can provide a example I will be very grateful to that.

kazupon commented 7 years ago

Sorry, my poor english. Thank you for your part of reproduction codes.

However, I don't understand your meaning too. Can you provide the minimum reproduction codes with jsfiddle (or codepen, etc) please ? I belive that we can talk with code. 😉

kwzm commented 7 years ago

You are very clever! Use jsfiddle is a good idea! so this is the link https://jsfiddle.net/8cwsopq0/2/ The surprising part is the example is success! However,use the same code my project exports error. Like this:

[Vue warn]: Error when evaluating expression "$validation.category.required": TypeError: Cannot read property 'required' of undefined

So I think there must has some differents between them.

Finally, I find variable categoryList in my project is dynamic getted,I guess it maybe the reason. So I use v-if to judge when categoryList has value. like this: `