提交表單時,提示報這個錯,找了半天,而後也百度了好久,一直沒找到答案,代碼以下:css
<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屬性,真是個奇怪的錯誤。html
將代碼中的vue
<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>
便可。