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

相关推荐
用户917439653918 小时前
基于SqlSugar开发框架的基础上快速开发H5端的移动应用
前端·负载均衡
Yesterday不想说话19 小时前
Promise的总结
前端
C_心欲无痕19 小时前
nodejs - npm和package.json文件解析
前端·npm·json
H@Z*rTE|i19 小时前
webpack 打包流程(极简记忆口诀)
前端·webpack·node.js
@菜菜_达19 小时前
前端 HTML 入门(标签)
前端·html
智航GIS19 小时前
7.1 自定义函数
前端·javascript·python
BlackWolfSky19 小时前
React中文网课程笔记1—快速入门
前端·笔记·react.js
A_one201019 小时前
利用npm内置命令构建脚本工具
前端·npm·node.js
哔哩哔哩技术19 小时前
2025年哔哩哔哩技术精选技术干货
前端·后端·架构
霍理迪19 小时前
CSS布局方式——定位
前端·css