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

相关推荐
远洋录9 分钟前
WebSocket 安全实践:从认证到加密
前端·人工智能·react
贩卖纯净水.12 分钟前
JS进阶--JS听到了不灭的回响
java·前端·javascript
番茄小酱00112 分钟前
select下拉框,首次进入页面没有显示value的情况
前端·javascript·vue.js·vue
爱上你家菜包13 分钟前
我的前端面试笔记(React篇)
前端·react.js
LCG元18 分钟前
Vue.js组件开发-如何动态更改图表类型
vue.js
互联网-小阿宇33 分钟前
【HTML+CSS+JS+VUE】web前端教程-1-VScode开发者工具快捷键
前端·javascript·html
鲤鱼池1 小时前
JavaScript:内存与内存泄露
javascript
顾尘眠1 小时前
element(vue2)表格插槽
javascript·vue.js·elementui
暗暗那1 小时前
Vue演练场基础知识(六)Props传参+Emits事件
前端·javascript·vue.js
前端青山1 小时前
使用XMLHttpRequest进行AJAX请求的详解
前端·javascript·ajax·okhttp·前端框架