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

  • 相关阅读:
    https证书设置以及设置301跳转
    SVN服务器从windows迁移至Linux
    禅道从windows迁移到linux
    gitlab安装和迁移
    java 枚举类型enum 的使用
    java中的日期注意事项
    C# using 三种使用方式 zhuan
    设计路径测试覆盖率与代码测试覆盖率
    Selenium API (C#) 转
    Selenium 2.0 WebDriver with Visual Studio, C#, & IE
  • 原文地址:https://www.cnblogs.com/wanggang2016/p/10053002.html
Copyright © 2011-2022 走看看