vue中 输入框输入回车后触发搜索(搜索按钮触发页面刷新问题)

一、回车触发搜索

代码

html 复制代码
<el-input
              @keyup.enter.native="keyDownEnter"
              size="medium"
              v-model="orgNameInput"
              placeholder="请输入"
              style="width:200px"
              clearable
            ></el-input>

<el-button type="primary" @click.native.prevent="search(1)" v-auth="'search'" size="medium">搜索</el-button>

js

javascript 复制代码
keyDownEnter (e) {
      var keyCode = window.event ? e.keyCode : e.which;
      if (keyCode === 13) {
        this.search(1);// 搜索按钮的回调
      }
    },

绑定事件时增加修饰符.enter.native 防止触发页面刷新。search方法中就是搜索数据的相关代码 根据自己的需求进行补充即可(.native.prevent也是修饰符 防止浏览器默认行为:触发浏览器刷新)

相关推荐
蜡台6 分钟前
vue.config.js 配置
前端·javascript·vue.js·webpack
qq_381338508 分钟前
微前端架构下的状态管理与通信机制深度解析:从 qiankun 源码到性能优化实战
前端·状态模式
吴声子夜歌11 分钟前
TypeScript——webpack
javascript·webpack·typescript
han_17 分钟前
JavaScript设计模式(六):职责链模式实现与应用
前端·javascript·设计模式
网易云音乐技术团队18 分钟前
音乐应该“更好找”:我们为什么在 Agent 时代做了一个音乐 CLI
前端·人工智能
攀登的牵牛花21 分钟前
2.1w Star 的 pretext 火在哪?
前端·github
进击的尘埃27 分钟前
Navigation API 如何重塑前端路由
javascript
散步去海边29 分钟前
Pretext 初识——零 DOM 测量的文本布局引擎
前端
早點睡39031 分钟前
ReactNative项目OpenHarmony三方库集成实战:react-native-orientation-locker
javascript·react native·react.js
xw-busy-code31 分钟前
npm 包管理笔记整理
前端·笔记·npm