关于vue按回车时刷新页面问题-已解决

270 字
1 分钟
关于vue按回车时刷新页面问题-已解决

最近使用vue开发遇到了一个有趣的问题,页面文本框在点击回车时会刷新页面,而且只有第一次会触发刷新,问题代码如下:

<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" >
<el-form-item label="账号描述" prop="description">
<el-input
v-model="queryParams.description"
placeholder="请输入账号描述"
clearable
size="small"
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>

点击回车按钮后不仅页面会刷新,并且路由多了一个问号

http://localhost:8088/personal/account?

经查阅资料得知原因,在当前页面元素中只有一个文本框时,点击回车时会自动提交表单;

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 :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px" @submit.native.prevent>
<el-form-item label="账号描述" prop="description">
<el-input
v-model="queryParams.description"
placeholder="请输入账号描述"
clearable
size="small"
style="width: 240px"
@keyup.enter.native="handleQuery"
/>
</el-form-item>

文章分享

如果这篇文章对你有帮助,欢迎分享给更多人!

关于vue按回车时刷新页面问题-已解决
https://czxcly.cn/posts/关于vue按回车时刷新页面问题-已解决/
作者
启源学社
发布于
2022-03-27
许可协议
CC BY-NC-SA 4.0

评论区

Profile Image of the Author
启源学社
公告
欢迎来到我的博客!
音乐
封面

音乐

暂未播放

0:00 0:00
暂无歌词
分类
标签
站点统计
文章
45
分类
2
标签
16
总字数
16,178
运行时长
0
最后活动
0 天前

文章目录