zoukankan      html  css  js  c++  java
  • 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>
    即可。

  • 相关阅读:
    servlet技术学习随笔
    python使用openpyxl读取excel文件
    课后作业-阅读任务-阅读提问-3
    课后作业-阅读任务-阅读提问-2
    课后作业-阅读任务-阅读笔记3
    构建之法:现代软件工程-阅读笔记2
    《构建之法:现代软件工程-阅读笔记》
    结对编程需求分析
    团队-团队编程项目作业名称-需求分析
    团队-团队编程项目作业名称-成员简介及分工
  • 原文地址:https://www.cnblogs.com/wanggang2016/p/10053002.html
Copyright © 2011-2022 走看看