脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue input输入框回车自动刷新页面

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实现穿梭框效果

    Vue实现穿梭框效果

    这篇文章主要为大家详细介绍了Vue实现穿梭框效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-09-09
  • 基于Vue3实现百度地图位置选择器组件

    基于Vue3实现百度地图位置选择器组件

    在开发前端应用时,地图选择器是一个非常常见的需求,本文将一步步展示如何使用 Vue 3 和 Element Plus 来实现一个百度地图位置选择器组件,有需要的可以参考一下
    2025-04-04
  • Vue3前端做打印页面信息实现打印功能(打印界面某个部分)

    Vue3前端做打印页面信息实现打印功能(打印界面某个部分)

    这篇文章主要介绍了如何使用vue3-print-nb依赖在Vue 3项目中实现页面打印功能,提供了完整的代码示例,大家可以根据项目需求选择合适的打印方法,需要的朋友可以参考下
    2025-02-02
  • vue和react的区别及优缺点解读

    vue和react的区别及优缺点解读

    这篇文章主要介绍了vue和react的区别及优缺点说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-03-03
  • vue3应用elementPlus table并滚动显示问题

    vue3应用elementPlus table并滚动显示问题

    这篇文章主要介绍了vue3应用elementPlus table并滚动显示问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-12-12
  • vue-cli+webpack项目 修改项目名称的方法

    vue-cli+webpack项目 修改项目名称的方法

    下面小编就为大家分享一篇vue-cli+webpack项目 修改项目名称的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • Vue.js每天必学之内部响应式原理探究

    Vue.js每天必学之内部响应式原理探究

    Vue.js每天必学之内部响应式原理探究，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • Vue编写多地区选择组件

    Vue编写多地区选择组件

    这篇文章主要为大家详细介绍了Vue编写一个挺靠谱的多地区选择组件的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Vue.js快速入门实例教程

    Vue.js快速入门实例教程

    vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。这篇文章主要介绍了Vue.js快速入门实例教程的相关资料,需要的朋友可以参考下
    2016-10-10
  • 浅谈VUE uni-app 常用API

    浅谈VUE uni-app 常用API

    这篇文章主要介绍了uni-app 常用API，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10

最新评论