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也是修饰符 防止浏览器默认行为:触发浏览器刷新)

相关推荐
吴文周1 小时前
告别重复劳动:一套插件让 AI 替你写代码、修Bug、做测试、上生产
前端·后端·ai编程
Mh1 小时前
我决定写一个 3D 地球仪来记录下我要去的地方
前端·javascript·动效
yaoxin5211232 小时前
390. Java IO API - WatchDir 示例
java·前端·python
懒狗小前端2 小时前
做了一个 codex 的中文文档网站,做的不好可以随便喷
前端·后端
. . . . .3 小时前
ref、useRef 和 forwardRef
前端·javascript·react.js
energy_DT3 小时前
2026年海上钻井平台数字孪生平台:引领海洋能源数字化转型
前端
Eric_见嘉3 小时前
在职前端 Agent 配置分享
前端·后端·agent
柚子8164 小时前
break跳出语句块的神奇技巧
前端·javascript
ejinxian5 小时前
Rust GUI框架Azul与Electron、WebView2
前端·javascript·electron
IT_陈寒5 小时前
Vue的v-for里用index当key,我被自己坑惨了
前端·人工智能·后端