今天做了一个小小的功能,就是基于elementUi
框架的一个输入框,需要监听输入框的回车事件,然后调取接口。
代码如下:
<el-form :model="ruleForm"
label-width="100px"
>
<el-form-item label="物料编码">
<el-input v-model="ruleForm.code" @keyup.enter.native="enterClick"></el-input>
</el-form-item>
</el-form>`
上面的写法是正常的,输入框回车后,调用的是enterClick
事件,结果发现,回车时,整个页面会刷新。
百度后发现:问题出在:当el-form
表单中只有一个el-input
时才会出现回车页面刷新的问题
解决方案就是给:el-form
添加@submit.native.prevent
即可阻止表单提交的默认行为。
解决!!!
基础很重要,多多学习,多多积累。