iview Form Input组件按下回车键搜索和禁止触发表单默认事件

在进行表单搜索功能开发的过程中,经常会有这样的需求,要求Input输入完成以后,按下回车键进行查询。实现这个功能只需要在Input组件上增加@keyup.enter事件即可

代码如下:

javascript 复制代码
<Input v-model="searchWords" @keyup.enter="gotoSearch" placeholder="Search By: Disease name, Food name, Comopound name, Dietary Pattern, or other factors..." />

在使用iview Form 表单开发的过程中,会遇到另一种问题,在Input输入完内容后按下回车自动刷新了页面,这是触发了表单的默认提交事件,这种情况该怎么处理呢?只需要在Form组件上加上@submit.native.prevent

代码如下:

javascript 复制代码
<Form ref="formDynamicRef" :model="formDynamic"  @submit.native.prevent>
</Form>
相关推荐
zhangyao94033010 天前
View Design TimePicker 限制时间范围
前端·javascript·view design
一只一只妖10 天前
uni-app + Vue3 + Vite + uView Plus 全流程搭建指南(TS/微信小程序)
view design
karshey11 天前
【前端】iView表单校验失效:Input已填入时,报错为未填入
前端·view design
X***48961 个月前
JavaWebSocket案例
ios·finebi·view design
囨誌1 个月前
Vben admin
前端·前端框架·anti-design-vue·view design
lyz2468597 个月前
动态报表筛选多项时的优化处理
javascript·uni-app·view design
顽强d石头7 个月前
viewDesign里的table内嵌套select动态添加表格行绑定内容丢失
数据库·mysql·view design
lyz2468598 个月前
iview表单提交验证时,出现空值参数被过滤掉不提交的问题解决
view design
学了就忘8 个月前
iView Table 组件跨页选择功能实现文档
view design
zzlyx999 个月前
设备管理系统功能与.NET+VUE(IVIEW)技术实现
前端·vue.js·view design