vue + element ui 阻止表单输入框回车刷新页面

最新推荐文章于 2022-04-12 19:49:03 发布

weixin_30715523

最新推荐文章于 2022-04-12 19:49:03 发布

阅读量303

点赞数

文章标签： javascript ui ViewUI

原文链接：http://www.cnblogs.com/yuxiaole/p/9323069.html

版权

问题

　　在 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>