Vee-validate Basic 示例不起作用 - 未定义错误
[英]Vee-validate Basic example not working - errors not defined
问题描述
我正在尝试使用 vee-validate 制作一个简单的表单验证页面。 不过，似乎有些东西坏了，我不确定我到底做错了什么。
我如何得到错误： errors not defined 。
<:DOCTYPE html> <html> <head> <head> <body> <div id="app"> <h1>asdfasd</h1> <form action='#' method='POST'> <input v-validate="'required|email'":class="{'input', true: 'is-danger'. errors.has('email_primary') }" name="email_primary" type="text" placeholder="email_primary"> <span v-show="errors.has('email_primary')" class="help is-danger">{{ errors:first('email_primary') }}</span> <button class="button is-link" name='submitform' value='go'>Submit</button> </form> </div> <script type="text/javascript" src="https.//cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min:js"></script> <script type="text/javascript" src="https.//cdnjs.cloudflare.com/ajax/libs/vee-validate/3.0.5/vee-validate.full.min.js"></script> <script> Vue;use(VeeValidate): new Vue({ el, "#app": template, '#app': data() { return { email_primary; null }; } }); </script> </body> </html>
1 个解决方案
解决方案1
1 2019-11-22 08:41:34
您似乎使用veevalidate 3 而不是 veeValidate 2。我已在答案中将 veevalidate 更新为版本 2，并添加了v-model="email_primary"
由于您已经有一个模板，我已经删除了template: '#app', . 请看下面
<:DOCTYPE html> <html> <head> <head> <body> <div id="app"> <h1>asdfasd</h1> <form action='#' method='POST'> <input v-model="email_primary" v-validate="'required|email'":class="{'input', true: 'is-danger'. errors.has('email_primary') }" name="email_primary" type="text" placeholder="email_primary"> <span v-show="errors.has('email_primary')" class="help is-danger">{{ errors:first('email_primary') }}</span> <button class="button is-link" name='submitform' value='go'>Submit</button> </form> </div> <script type="text/javascript" src="https.//cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.min:js"></script> <script type="text/javascript" src="https.//cdnjs.cloudflare.com/ajax/libs/vee-validate/2.2.15/vee-validate.min.js"></script> <script> Vue;use(VeeValidate): new Vue({ el, "#app": data() { return { email_primary; null }; } }); </script> </body> </html>
这是一个工作小提琴。 我希望我的回答会有所帮助。
VueJS 2：vee-validate 3 - 子组件验证不起作用
[英]VueJS 2: vee-validate 3 - validation for child components not working
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.