Iview 表单提交: Cannot read property 'validate' of undefined

Posted 2021-01-24 wanggang2016

提交表单时，提示报这个错，找了半天，然后也百度了很久，一直没找到答案，代码如下：

<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>

即可。