1. 程式人生 > >Iview 表單提交: Cannot read property 'validate' of undefined

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