参考链接:https://blog.csdn.net/Phillip_Coulson/article/details/107838034
使用vue开发,页面文本框在点击回车时会刷新页面,而且只有第一次会触发刷新。
例子
1、打开两个功能【错误码查询】和【白名单管理】,在这个文本框输入任何字符后,回车
2、回车后页面进行了刷新,跳转 url中也多出了?
3、刷新下后置剩下一个导航栏了
4、再次回车查询正常,不会刷新了
解决过程
1、问题代码如下:
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()" >
<el-form-item>
<el-input v-model.trim="dataForm.key" placeholder="参数" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataListNew()">查询</el-button>
</el-form-item>
</el-form>
2、点击回车按钮后不仅页面会刷新,并且路由多了一个问号
http://localhost:8001/?#
3、经查阅资料得知原因,在当前页面元素中只有一个文本框时,点击回车时会自动提交表单;
W3C 标准中有如下规定:
When there is only one single-line text input field in a form,
the user agent should accept Enter in that field as a request to submit the form.
当表单中只有一个单行文本输入框时,客户端应该接受该区域中的Enter作为提交表单的请求
解决方案
在form标签中加入@submit.native.prevent阻止事件即可:
<el-form :inline="true" :model="dataForm"
@keyup.enter.native="getDataList()" @submit.native.prevent>
<el-form-item>
<el-input v-model.trim="dataForm.key" placeholder="参数" clearable></el-input>
</el-form-item>
<el-form-item>
<el-button @click="getDataListNew()">查询</el-button>
</el-form-item>
</el-form>