element中input框添加@keyup.enter.native,按enter后刷新页面

按enter键本来是调用搜索接口,但却是刷新了整个页面

复制代码
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="110px">
            <el-form-item label="场景名称:" prop="actionName">
                <el-input
                v-model="queryParams.actionName"
                placeholder="请输入名称"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

原因:form 表单中只有一个输入框,在输入框中按下回车就是提交该表单,且会刷新页面。阻止这一默认行为,可以 在 form 标签上添加 @submit.native.prevent就可以解决刷新整个页面的问题。

复制代码
<el-form :model="queryParams"  label-width="110px" @submit.native.prevent>
相关推荐
BigTopOne2 分钟前
android jetpack 有哪些常用的组件
前端
sunbyte2 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | DragNDrop(拖拽占用组件)
前端·javascript·css·vue.js·vue
柚子8165 分钟前
告别FLIP动画:View Transition API带来的革命性变革
前端·javascript
level_xiwei5 分钟前
有关资源泄漏的一些知识
前端
excel7 分钟前
使用 Prisma 实现数据库字段的动态迁移实践
前端·后端
天涯学馆9 分钟前
JS 组合模式在组件化开发中的应用:从原理到实战
前端·javascript·面试
玲小珑10 分钟前
Next.js 教程系列(七)服务端渲染 (SSR) 深度探究:`getServerSideProps`
前端·next.js
FogLetter10 分钟前
闭包:JavaScript中的魔法背包
前端·javascript
前端小巷子11 分钟前
浏览器的同源策略与跨域问题
前端·面试·浏览器
江城开朗的豌豆11 分钟前
Vuex中mutations和actions的那些事儿:为啥非要分家?
前端·javascript·vue.js