vue + element ui 阻止表单输入框回车刷新页面
问题
在 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 阻止表单输入框回车刷新页面的更多相关文章
- vue+element ui 重置表单
<el-dialog :title="addForm.title" :visible.sync="dialogFormVisible" width=&qu ...
- Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成) 动态表单生成 ElementUI官网引导 Element表单生成 Element动态增减表单,在线代码 关键配置 templa ...
- 不使用Ajax,如何实现表单提交不刷新页面
不使用Ajax,如何实现表单提交不刷新页面? 目前,我想到的是使用<iframe>,如果有其他的方式,后续再补. 举个栗子: 在表单上传文件的时候必须设置enctype="mul ...
- 防止表单提交时刷新页面-阻止form表单的默认提交行为
最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有 由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...
- element ui form表单清空规则
公司项目重构,经过商定使用element ui.在重构项目的时候发现一下element ui上很蛋疼的东西. 例如,这个form表单就是一个.趁着在高铁上没事,把想写的东西写一下. 先说一下eleme ...
- 封装Vue Element的form表单组件
前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像& ...
- element ui FORM表单
form表单 Form-Item Slot [label] 旧版语法 <el-form-item label="活动名称" prop="name"> ...
- layer,Jquery,validate实现表单验证,刷新页面,关闭子页面
1.表单验证 //获取父层 var index = parent.layer.getFrameIndex(window.name); //刷新父层 parent.location.reload(); ...
- form表单提交不刷新页面的方法
方法1:给form表单加onsubmit事件,值为return false; <form action="" method="post" onsubmi ...
随机推荐
- iOS - 安全
1. CheckList http://www.jianshu.com/p/d3cc2d5c177d a 数据安全.分为数据传输安全和数据存储安全 数据存储安全为保存在App中的数据安全.不允许明文存 ...
- 1.python的一些规范
Python的一些规范 1.标识符 定义:允许作为名字的有效字符串集合 名字必须有实际意义,可读性好 首字母必须是字母或下划线(_) 剩下的字符可以是字母和数字或者下划线 大小写敏感 两种风格:con ...
- poj1681 Painter's Problem(高斯消元法,染色问题)
题意: 一个n*n 的木板 ,每个格子 都 可以 染成 白色和黄色,( 一旦我们对也个格子染色 ,他的上下左右都将改变颜色): 给定一个初始状态 , 求将 所有的 格子 染成黄色 最少需要染几次? ...
- TDDL与Spring Boot集成Version报错——跟踪与解决
先说背景:公司采用diamond+tddl,这套技术来做web管理.本人处于好奇率先体验了下spring-boot,于是就有了spring-boot+tddl的组合.但是jar包上线后,屡屡发现一条e ...
- 基于ajax 的 几个例子 session ,ajax 实现登录,验证码 ,实现ajax表单展示
headers: {"X-CSRFToken": $("[name='csrfmiddlewaretoken']").val()},data:$(". ...
- SQL与NOSQL
一:关系型数据库 1.概念: 采用了关系模型来组织数据的数据库.简单讲,关系模型就是二维表格模型.二维表格在 数据库中我们称之为记录,列在数据库中我们成为字段. 2举例: M ...
- execvp php-fpm reload使用的函数
php重启 本质上是调用 execvp("/usr/local/php/sbin/php-fpm"); execvp就是用一个新的进程把自己替换掉,一个进程一旦调用exec类函数, ...
- JS: 数组扁平化
数组扁平化 什么是数组扁平化? 数组扁平化就是将一个多层嵌套的数组 (Arrary) 转化为只有一层. // 多层嵌套 [1, 2, [3, 4]] // 一层 [1, 2, 3, 4] 递归实现 思 ...
- POJ 1014
#include<iostream>#include<stdio.h>#define num 6using namespace std; bool DFS(int i,int ...
- nginx添加认证
1.检查工具是否安装,如果未安装则使用yum安装 #htpasswd 有以上输出表示已经安装,如果没有按装,使用如下命令安装: #yum -y install httpd-tools 2.htpas ...