iview Form Input组件按下回车键搜索和禁止触发表单默认事件
在进行表单搜索功能开发的过程中,经常会有这样的需求,要求Input
输入完成以后,按下回车键进行查询。实现这个功能只需要在Input
组件上增加@keyup.enter
事件即可
代码如下:
<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
。
代码如下:
<Form ref="formDynamicRef" :model="formDynamic" @submit.native.prevent>
</Form>