• vue ElementUI el-input 键盘enter事件 导致刷新表单问题


    问题描述:ElementUI 中的el-input,当input仅有一项时,使用@keyup.enter.native事件绑定回车事件,出现点击回车后,浏览器会刷新页面的问题;

    <el-form-item label="密码">
                        <el-input
                            type="password"
                            show-password
                            v-model="secValidate.pswd"
                            autocomplete="off"
                            @keyup.enter.native="checkSubmit"></el-input>
                    </el-form-item>
    

    问题原因:是由于当表单只有一个文本框时,按下回车将会触发表单的提交事件, 导致页面的刷新。
    解决方法一:在el-from 加上 @submit.native.prevent,禁止表单默认submit事件

    <el-form
                    label-width="80px"
                    size="mini"
                    @submit.native.prevent
                    ref="SecondForm"
                    :model="secValidate">
                    <el-form-item label="密码">
                        <el-input
                            type="password"
                            show-password
                            v-model="secValidate.pswd"
                            autocomplete="off"
                            @keyup.enter.native="checkSubmit"></el-input>
                    </el-form-item>
                </el-form>
    

    解决方法二:既然el-form只有一个条件时,enter会触发submit事件,那就加一个隐藏条件,让他不唯一咯,比如再加一个隐藏的el-input。
    代码自己体会

  • 相关阅读:
    第5次系统综合实践
    第4次系统综合实践
    第3次系统综合实践
    第2次实践作业
    第1次实践作业
    第03组 Beta版本演示
    第03组 Beta冲刺(4/4)
    OO第四单元总结
    OO第三单元总结
    OO第二单元总结
  • 原文地址:https://www.cnblogs.com/midnight-visitor/p/13294424.html
Copyright © 2020-2023  润新知