问题

　　在 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. Archlinux Setup AUR

    方案一 pacman -Sy yaourt yaourt -Sy pacaur pacaur -Sa xxx 方案二 git clone git clone https://aur.archlinux ...

  2. dataTable 参数说明

    下面是一些常用的参数列表,比较常用或者有价值的标示为绿色. 功能参数(Features) 参数名 说明 参考值 默认值 autoWidth 定义是否由控件自动控制列宽 Boolean true def ...

  3. 纯css实现不固定行数的文本在一个容器内垂直居中

    项目中要实现的效果如图: html代码 及 css代码: <!DOCTYPE html> <html> <head> <meta charset=" ...

  4. 使用git工具删除github上的文件或者文件夹

    解决 使用git工具删除github上的文件或者文件夹 当我们需要从github上删除一些我们不需要的文件或者文件夹时,如果通过github来操作的话,将会很麻烦,因为github只允许删除一个仓库, ...

  5. Ubuntu16.04 Nvidia驱动、CUDA安装

    安装Nvidia驱动和CUDA时往往很费力,经常有莫名奇妙的错误,这次安装十分顺畅,权当记录一下,以方便以后再次安装. 一.Nvidia显卡驱动安装 sudo add-apt-repository p ...

  6. MySQl资料链接

    原文:http://www.uml.org.cn/sjjm/sjjm-MySql.asp MySQl   MySQL高可用数据库内核深度优化的四重定制   MySQL数据表存储引擎类型及特性   My ...

  7. Ejb3 + Jboss8 出现Session id hasn't been set for stateful component

    Ejb 3 + JBoss 8  在使用客户端远程访问有状态的Ejb对象时,出现ERROR: Session id hasn't been set for stateful component 出现该 ...

  8. [转]MVC HtmlHelper用法大全

    原文链接:http://www.cnblogs.com/jyan/archive/2012/07/23/2604474.html HtmlHelper用来在视图中呈现 HTML 控件. 以下列表显示了 ...

  9. 全网最详细使用Scrapy时遇到0: UserWarning: You do not have a working installation of the service_identity module: 'cannot import name 'opentype''. Please install it from ..的问题解决（图文详解）

    不多说,直接上干货! 但是在运行爬虫程序的时候报错了,如下: D:\Code\PycharmProfessionalCode\study\python_spider\30HoursGetWebCraw ...

  10. centos6 free 和 centos 7的free 的差异与对比

    目录 一 centos6 free 常用参数和含义 centos6 free 命令示例 free 值讲解 计算公式 二 centos7 free 常用的参数 centos7 free 命令示例 计算公 ...