Iview 表單提交: Cannot read property 'validate' of undefined
阿新 • • 發佈:2018-12-02
提交表單時,提示報這個錯,找了半天,然後也百度了很久,一直沒找到答案,程式碼如下:
<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>
即可。