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

  • 相关阅读:
    app store connect待提交修改版本号
    tableview无法调用touchesBegan
    UISearchController遇坑总结
    中文空格 占位符(OC)
    OC校验字符串是否每个字符都相同
    IPA processing failed
    关于静态代码块和非静态代码块执行顺序(了解这些你就了解所有)
    MapReduce
    大数据---HDFS写入数据的过程
    大数据之--------hadoop存储(HDFS)
  • 原文地址:https://www.cnblogs.com/wanggang2016/p/10053002.html
Copyright © 2011-2022 走看看