问题

　　在 vue+element ui 中只有一个输入框（el-input）的情况下，回车会提交表单。

解决方案

　　在 el-form 上加上 @submit.native.prevent 这个则会阻止表单回车提交。

测试

下面的代码出现表单回车提交

<body>

<div id="app">

    <el-form ref="form" :model="form" label-width="80px">

        <el-form-item label="活动名称">

            <el-input v-model="form.name"></el-input>

        </el-form-item>

    </el-form>

</div>

<!-- 引入组件库 -->

<script type="text/javascript" src="${ctx}/static/common/js/vue.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="text/javascript">

    new Vue({

        el: "#app",

        data: {

            form : {

            }

        }

    });

</script>

</body>

下面的代码不会出现回车表单提交：el-form 中加上@submit.native.prevent

<body>

<div id="app">

    <el-form ref="form" :model="form" label-width="80px" @submit.native.prevent >

        <el-form-item label="活动名称">

            <el-input v-model="form.name"></el-input>

        </el-form-item>

    </el-form>

</div>

<!-- 引入组件库 -->

<script type="text/javascript" src="${ctx}/static/common/js/vue.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="text/javascript">

    new Vue({

        el: "#app",

        data: {

            form : {

            }

        }

    });

</script>

</body>

下面的代码也不会出现回车表单提交：使用两个 el-input

<body>

<div id="app">

    <el-form ref="form" :model="form" label-width="80px">

        <el-form-item label="活动名称">

            <el-input v-model="form.name"></el-input>

        </el-form-item>

        <el-form-item label="即时配送">

            <el-input v-model="form.delivery"></el-input>

        </el-form-item>

    </el-form>

</div>

<!-- 引入组件库 -->

<script type="text/javascript" src="${ctx}/static/common/js/vue.js"></script>

<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="text/javascript">

    new Vue({

        el: "#app",

        data: {

            form : {

            }

        }

    });

</script>

</body>

vue + element ui 阻止表单输入框回车刷新页面的更多相关文章

  1. vue+element ui 重置表单

    <el-dialog :title="addForm.title" :visible.sync="dialogFormVisible" width=&qu ...

  2. Vue+Element的动态表单，动态表格（后端发送配置，前端动态生成）

    Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 templa ...

  3. 不使用Ajax，如何实现表单提交不刷新页面

    不使用Ajax,如何实现表单提交不刷新页面? 目前,我想到的是使用<iframe>,如果有其他的方式,后续再补. 举个栗子: 在表单上传文件的时候必须设置enctype="mul ...

  4. 防止表单提交时刷新页面-阻止form表单的默认提交行为

    最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有 由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...

  5. element ui form表单清空规则

    公司项目重构,经过商定使用element ui.在重构项目的时候发现一下element ui上很蛋疼的东西. 例如,这个form表单就是一个.趁着在高铁上没事,把想写的东西写一下. 先说一下eleme ...

  6. 封装Vue Element的form表单组件

    前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像& ...

  7. element ui FORM表单

    form表单 Form-Item Slot [label] 旧版语法 <el-form-item label="活动名称" prop="name"> ...

  8. layer,Jquery,validate实现表单验证，刷新页面，关闭子页面

    1.表单验证 //获取父层 var index = parent.layer.getFrameIndex(window.name); //刷新父层 parent.location.reload(); ...

  9. form表单提交不刷新页面的方法

    方法1:给form表单加onsubmit事件,值为return false; <form action="" method="post"  onsubmi ...

随机推荐

  1. Exp4 恶意代码分析 20164321 王君陶

    Exp4 恶意代码分析 20164321 王君陶 1.实践目标 1.1是监控你自己系统的运行状态,看有没有可疑的程序在运行. 1.2是分析一个恶意软件,就分析Exp2或Exp3中生成后门软件:分析工具 ...

  2. 用navicat远程连接mysql:Can't connect to MySQL server (10060)

    出现这种现象的原因有两个,一个是当前用户被mysql服务器拒绝,另外一个原因是3306端口被被防火墙禁掉,无法连接到该端口.解决方法如下: 1.设置远程用户访问权限: // 任何远程主机都可以访问数据 ...

  3. [As3.0] 获取本机信息

    package { import flash.display.Sprite; import flash.events.Event; import flash.net.NetworkInfo; impo ...

  4. subtext 安装PythonIDE -Anaconda

    安装PythonIDE -Anaconda 打开subtext,通过快捷键 cmd+shift+P 打开 Package Control 来安装其他的插件了. 输入 install 然后你就能看见屏幕 ...

  5. IOC容器02

    获取xml文件路径,使用IO读取xml文件,使用Document对象解析xml文件,将xml中的bean的信息注册到BeanDefinition类,将BeanDefinition保存到一个map中:该 ...

  6. python strip()函数的用法

    函数原型 声明:s为字符串,rm为要删除的字符序列 s.strip(rm)         删除s字符串中开头.结尾处,位于 rm删除序列的字符 s.lstrip(rm)        删除s字符串中 ...

  7. 【链表】Linked List Cycle

    题目: Given a linked list, determine if it has a cycle in it. 思路: 对于判断链表是否有环,方法很简单,用两个指针,一开始都指向头结点,一个是 ...

  8. Android_字符串转换

    这个很简单,只是一个输入框,一个按钮,一个TextView用来显示转换后的字符串,按钮有一个事件,使用可视化操作界面下添加的,毕竟很方便嘛!

  9. 探索DatePicker新用法

    很少用DatePicker,项目需要用到DatePicker,再用时发现跟以前有些变化,重新简单梳理一下DatePicker的用法. 先上效果图: 首先是xml文件的用法: 以前是用android:s ...

  10. wordpress常用标记

    博客地址:bloginfo('url'); 博客名称:bloginfo("name"); 博客描述:bloginfo("decription"); 文章内容: ...