Iview 表单提交: Cannot read property 'validate' of undefined
提交表单时,提示报这个错,找了半天,然后也百度了很久,一直没找到答案,代码如下:
<link href="~/lib/iview3.1.4/styles/iview.css" rel="stylesheet" /> <link href="~/css/login.css" rel="stylesheet" /> <link href="~/lib/iview3.1.4/styles/iview.css" rel="stylesheet" /> <link href="~/css/iconfont.css" rel="stylesheet" /> <div class="login" id="login"> <div class="login-con"> <Card icon="log-in" title="欢迎登录" :bordered="false"> <div class="form-con"> <template> <i-form :model="formInline" :rules="ruleInline" ref="formInline" inline> <Form-Item prop="user"> <i-input type="text" v-model="formInline.user" placeholder="Username"> <Icon type="ios-person-outline" slot="prepend"></Icon> </i-input> </Form-Item> <Form-Item prop="password"> <i-input type="password" v-model="formInline.password" placeholder="Password"> <Icon type="ios-lock-outline" slot="prepend"></Icon> </i-input> </Form-Item> <Form-Item> <i-button type="primary" v-click="handleSubmit('formInline')">Signin</i-button> </Form-Item> </i-form> </template> </div> </Card> </div> </div> <script src="~/lib/vue2.5.17/vue.min.js"></script> <script src="~/lib/iview3.1.4/iview.min.js"></script> <script> var vm = new Vue({ el: "#login", data: { formInline: { user: '', password: '' }, ruleInline: { user: [ { required: true, message: 'Please fill in the user name', trigger: 'blur' } ], password: [ { required: true, message: 'Please fill in the password.', trigger: 'blur' }, { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' } ] } }, methods: { handleSubmit: function (formName) { var _this = this; console.log(formName); console.log(_this.$refs[name]); _this.$refs[formName].validate(function (valid) { if (valid) { alert('验证成功') } }) }, }, }); </script>
然后仔仔细细的检查了每一个标签,发现,click事件绑定写错了,绑定事件写错了竟然提示找不到validate属性,真是个奇怪的错误。
将代码中的
<Form-Item> <i-button type="primary" v-click="handleSubmit('formInline')">Signin</i-button> </Form-Item>
修改为:
<Form-Item> <i-button type="primary" v-on:click="handleSubmit('formInline')">Signin</i-button> </Form-Item>
即可。