zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    CDOJ 1059 秋实大哥与小朋友 STL(set)+离散化+BIT区间更新单点查询
    hdu 1754 线段树 水题 单点更新 区间查询
    ZOJ 2301 离散化
    hdu 1166 线段树 区间求和 +单点更新 CD模板
    UVA 12299 线段树 ( 单点跟新 , 区间查询)
    TTTTTTTTTTTTT LA 2191 树状数组 稍修改
    TTTTTTTTTTT LA 4329 BIT模版
    POJ 1912 凸包
    对django模型中的objects的理解
    巨蟒python全栈开发django4:url反向解析图解&&模板渲染2
  • 原文地址:https://www.cnblogs.com/yuxiaole/p/9323069.html
Copyright © 2011-2022 走看看