关于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按回车时刷新页面问题-已解决/ 相关文章 智能推荐
1
解决vue两个表单切换时 校验规则失效问题
技术文章 解决vue两个表单切换时,校验规则失效问题
2
Vue格式化时间显示样式
技术文章 Vue格式化时间显示样式
3
在web网页上打开电脑本地exe应用
技术文章 在web网页上打开电脑本地exe应用
4
vue文件上传速度慢,有可能是nginx配置的问题
技术文章 vue文件上传速度慢,有可能是nginx配置的问题
5
彻底卸载谷歌浏览器残留
其它教程 彻底卸载谷歌浏览器残留
随机文章 随机推荐