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>

相关阅读:
mysql 创建++删除数据表
mac 配置apache
mac 安装mysql
mysql 创建++删除数据库
配置默认编码为utf8
mysql 添加用户
mysql 查看库结构---查看表结构
centos7
centOS 7 安装mysql
修改字符集

原文地址：https://www.cnblogs.com/yuxiaole/p/9323069.html