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>
即可。

浙公网安备 33010602011771号