Vue input输入框回车以后自动刷新页面

简介: Vue input输入框回车以后自动刷新页面

20210527153548522.png今天测试提了一个bug,输入框输入barCode时,按下回车键应该是录入数量,但是却直接刷新页面了,一起来探究一下为什么?

原因:W3C 标准中有如下规定:当一个form元素中只有一个输入框时,在该输入框中按下回车应提交该表单

解决方案:

可以在标签上添加 @submit.native.prevent。

<el-form label-position="top" size="mini" :inline="true" :disabled="disabledByExtract" @submit.native.prevent>
 <el-input v-model="scanInput.scanResult.value" :text.sync="scanInput.scanResult.text" 
 :disabled="!item.organizationId || disabledByExtract" 
 @change="handleProductSkuScanChange"> 
 </el-input>
</el-form>
相关文章
|
1天前
|
移动开发 前端开发
ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
ruoyi-nbcio-plus基于vue3的flowable的支持自定义业务流程处理页面detail.vue的升级修改
|
1天前
|
JavaScript
vue打印v-model 的值
vue打印v-model 的值
|
1天前
|
JavaScript
vue知识点
vue知识点
4 1
|
2天前
|
JavaScript
Vue实战-组件通信
Vue实战-组件通信
4 0
|
2天前
|
JavaScript
Vue实战-将通用组件注册为全局组件
Vue实战-将通用组件注册为全局组件
5 0
|
2天前
|
JavaScript 前端开发
vue的论坛管理模块-文章评论02
vue的论坛管理模块-文章评论02
|
2天前
|
JavaScript Java
vue的论坛管理模块-文章查看-01
vue的论坛管理模块-文章查看-01
|
3天前
|
存储 JavaScript
Vue当前时间与接口返回时间的判断
Vue当前时间与接口返回时间的判断
8 0
|
3天前
|
JavaScript 前端开发
Vue生成Canvas二维码
Vue生成Canvas二维码
8 0
|
2天前
|
JavaScript
vue页面加载时同时请求两个接口
vue页面加载时同时请求两个接口