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

相关推荐
qq_4152162517 分钟前
vue3搭建项目yarn+vue3+webpack+less+element-plus
前端·webpack·less
天天向上102420 分钟前
VueUse的使用
前端·vue.js·vscode
FREE技术20 分钟前
学生成绩管理系统 基于java+springboot+vue实现前后端分离项目并附带万字文档(源码+数据库+万字详设文档+软件包+安装教程)
java·vue.js·spring boot·mysql
猪猪拆迁队1 小时前
前端图形引擎架构设计:双引擎架构设计
前端·后端·架构
宋辰月2 小时前
学习react第三天
前端·学习·react.js
bug总结2 小时前
更新原生小程序封装(新增缓存订阅)完美解决
前端·缓存·小程序
GISer_Jing2 小时前
Node.js 开发实战:从入门到精通
javascript·后端·node.js
5335ld2 小时前
后端给的post 方法但是要求传表单数据格式(没有{})
开发语言·前端·javascript·vue.js·ecmascript
二川bro3 小时前
第33节:程序化生成与无限地形算法
前端·算法·3d·threejs
QDKuz3 小时前
掌握Vue2转Vue3, Options API 转 Composition API
前端·javascript·vue.js