Vue input输入框回车以后自动刷新页面(直播程序)

更新时间：2023年01月28日 14:20:21 作者：云豹科技-苏凌霄

这篇文章主要介绍了直播程序，Vue input输入框回车以后自动刷新页面,适用场景是在输入框输入字符并按下回车键搜索时，刷新页面，需要的朋友参考下实现代码

直播程序，Vue input输入框回车以后自动刷新页面

解决方案：

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

<br><el-form label-position="top" size="mini" :inline="true" :disabled="disabledByExtract" @submit.native.prevent><br> <br> <el-input v-model="scanInput.scanResult.value" :text.sync="scanInput.scanResult.text" <br> :disabled="!item.organizationId || disabledByExtract" <br> @change="handleProductSkuScanChange"> <br> </el-input><br> <br></el-form>

以上就是直播程序，Vue input输入框回车以后自动刷新页面。

补充：vue el-input 使用回车键会刷新页面的问题

场景：
vue项目中在输入框输入字符并按下回车键搜索时，不会进行搜索，而是会刷新页面

原因：
当form表单中只有一个input时，按下回车建会自动触发页面的提交功能，产生刷新页面的行为

解决：
如下代码，在 el-form 中加个 @submit.native.prevent，就可以了，
@submit: 表单提交
.native 绑定系统原生事件
.prevent 提交以后不刷新页面

<el-form
            :model="goodsListTab.queryParams"
            ref="queryForm"
            :inline="true"
            v-show="true"
            @submit.native.prevent
          >
            <el-form-item label="品名" prop="baseName" >
              <el-input
                v-model="goodsListTab.queryParams.baseName"
                placeholder="请输入品名"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>

            <el-form-item>
              <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery" >搜索</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery" >重置</el-button>
            </el-form-item>
          </el-form>

到此这篇关于Vue input输入框回车以后自动刷新页面(直播程序)的文章就介绍到这了,更多相关Vue input输入框回车自动刷新页面内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue-admin-template 报Uncaught (in promise) error问题及解决
这篇文章主要介绍了Vue-admin-template 报Uncaught (in promise) error问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-07-07
vue-router定义元信息meta操作
这篇文章主要介绍了vue-router定义元信息meta操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-12-12
Vue Spa切换页面时更改标题的实例代码
本篇文章主要介绍了Vue Spa切换页面时更改标题的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-07-07
vue中字典的使用
这篇文章主要介绍了vue中字典的使用,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
2023-12-12
优化Vue项目编译文件大小的方法步骤
这篇文章主要介绍了优化Vue项目编译文件大小的方法步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05
vue前端如何将任意文件转为base64传给后端
这篇文章主要介绍了vue前端如何将任意文件转为base64传给后端问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
Vue运用transition实现过渡动画
vue的过渡动画，主要是transition标签的使用，配合css动画实现的。接下来通过本文给大家分享Vue运用transition实现过渡动画效果，感兴趣的朋友一起看看吧
2019-05-05
在vue项目创建的后初始化首次使用stylus安装方法分享
下面小编就为大家分享一篇在vue项目创建的后初始化首次使用stylus安装方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-01-01
Vue-Router的使用方法
这篇文章主要介绍了Vue-Router的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-09-09
vue实现一个炫酷的日历组件
公司业务新开了一个商家管理微信H5移动端项目，日历控件是商家管理员查看通过日程来筛选获取某日用户的订单等数据。下面小编给大家带来了基于vue实现一个炫酷的日历组件，感兴趣的朋友参考下吧
2018-10-10