在使用框架iview的表单验证的时候报出错误
1 错误：TypeError: Cannot read property ‘validate’ of undefined
[Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'validate' of undefined"
found in
---> <Button>
<FormItem>
<IForm>
<Modal>
2 错误的源码：
<template>
<Form :refs="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
<FormItem label="Name" prop="name">
<Input v-model="formValidate.name" placeholder="Enter your name"></Input>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
<Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
</FormItem>
</Form>
</template>
<script>
export default {
data () {
return {
formValidate: {
name: '',
},
ruleValidate: {
name: [
{ required: true, message: 'The name cannot be empty', trigger: 'blur' }
]
}
}
},
methods: {
handleSubmit (name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.$Message.success('Success!');
} else {
this.$Message.error('Fail!');
}
})
},
handleReset (name) {
this.$refs[name].resetFields();
}
}
}
</script>
3原因：
本代码的原因就是因为一个冒号引起的。
如图所示，就是因为 :refs=”formValidate”
4 解决方法
把 :refs="formValidate" 改为 ref="formValidate" 即可
希望帮到你们
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由半码博客整理，本文链接：https://www.bmabk.com/index.php/post/119295.html
