Vue按回车键进行搜索的实现方式

目录
  • Vue按回车键进行搜索
    • 第一种方法
    • 第二种方法
  • Vue使用回车键失效的解决
    • Vue回车键事件
    • 栗子
    • 回车失效原因
    • 解决方法
  • 总结

Vue按回车键进行搜索

需求：

为了用户方便进行搜索数据的时候不想点击搜索按钮，想要在input输入框内输入完成之后直接按回车键进行搜索

第一种方法

在input标签内部增加@keyup.enter事件即可，事件名为按钮点击名称

<div class="center">
      <input placeholder="输入名称" v-model="keyword"
             @keyup.enter="getsearchdata">
</div>
<div class="seal" @click="getsearchdata">搜索</div>

第二种方法

<div class="center">
      <input placeholder="输入名称" v-model="keyword"
       @keyup.enter.native="getsearchdata" @submit.native.prevent
      >
</div>
<div class="seal" @click="getsearchdata">搜索</div> 

注：

@keyup.enter.native="getsearchdata"//这里要和搜索的事件名称一样

@submit.native.prevent //这句话禁止第一次进入页面回车搜索的时候刷新页面

这两种方法，都能实现按回车键进行搜索的功能

Vue使用回车键失效的解决

在用Vue开发一个前端页面，做的一个搜索功能，目标：输入搜索条件后，回车键直接搜索。但是得到的结果却是系统刷新，并没有搜索。这是为啥呢？对比了其他文件，代码没有错，一脸懵。后来查阅资料才发现错误，下面介绍解决方法~

Vue回车键事件

对于原生的Vue来说，要绑定回车（enter）事件，只需要：

@keyup.enter="方法名"

而如果用了类似于Element UI之类的第三方UI框架的话，则得在后面加【.native】修饰符：

@keyup.enter.native="方法名"

栗子

<el-form-item label="名称" prop="taskName">
        <el-input
          v-model="queryParams.taskName"
          placeholder="请输入名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
</el-form-item>

<el-form-item>
    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
</el-form-item>

回车失效原因

查考相关文档得知：

W3C 标准中有如下规定：

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。如果希望阻止这一默认行为，可以在 <el-form> 标签上添加 @submit.native.prevent。

解决方法

<el-form> 标签上添加 @submit.native.prevent。
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px" @submit.native.prevent>
  • @submit: 表单提交
  • .native 绑定系统原生事件
  • .prevent 提交以后不刷新页面

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue 项目软键盘回车触发搜索事件

    vue 项目软键盘回车触发搜索事件

    目的:掉起来右下角为搜索的按钮 步骤: 1.input的type改为search,再写keydown按下时的事件调取搜索事件的方法 这样安卓手机上回车就变成了"搜索",不过ios仍然是换行 2.input 外面套form,必须要有action,action="javascript:return true" 我的项目用van:想弹出数字键盘,并监听搜索(换行),在安卓上执行搜索按钮,在ios 执行blur,因为安卓上点完成不执行blur <form @submi

  • Vue仿百度搜索功能

    Vue仿百度搜索功能

    简述 学习vue的第二节,由于2.0版本并不向下兼容,视频中的不少内不能实现.下面列出一些主要知识点 // v-on 可简写为@ // 事件冒泡是指当点击div内部的button触发show1()时,必然会冒泡到div上执行show2(),这才层级div中很常见 // 阻止冒泡,原生js法,设置事件对象的cancelBubble属性为true // vue方法@click.stop // 阻止默认行为,原生js法,设置事件对象的preventDefault属性为true // vue方法@con

  • vue.js项目 el-input 组件 监听回车键实现搜索功能示例

    基于element-ui 组件 开发的vue.js项目, 实现回车键发起搜索,和原生的input 标签使用方法不一样: el-input 监听键盘按下状态 得用@keyup.enter.native,如果是非el-input 组件,可以直接用@keyup.enter <el-input placeholder="搜索" icon="search" v-model="input" :on-icon-click="pchandleIc

  • Vue按回车键进行搜索的实现方式

    目录 Vue按回车键进行搜索 第一种方法 第二种方法 Vue使用回车键失效的解决 Vue回车键事件 栗子 回车失效原因 解决方法 总结 Vue按回车键进行搜索 需求: 为了用户方便进行搜索数据的时候不想点击搜索按钮,想要在input输入框内输入完成之后直接按回车键进行搜索 第一种方法 在input标签内部增加@keyup.enter事件即可,事件名为按钮点击名称 <div class="center">       <input placeholder="输

  • 基于vue实现多引擎搜索及关键字提示

    本文实例为大家分享了vue实现多引擎搜索及关键字提示的具体代码,供大家参考,具体内容如下 关键代码: <div class="header-search"> <form id="form" action="http://m.baidu.com/s" method="get" accept-charset="utf-8" class="clearfix" autocomp

  • Vue 实现输入框新增搜索历史记录功能

    vue实现搜索显示历史搜索记录,采用插件-good-storage 安装插件    npm install good-storage -S 在本地新建cache.js文件,该文件是关于本地存储的逻辑处理(缓存到本地的数据最大缓存15条,并且新的插入在第一位,首先得到当前的存储数据情况,将关键字存到数组中,判断如果数组中有相同的数据,则把重复的数据删除,将新的关键字存入到前面) cache.js 文件中的代码如下 /*把搜索的结果保存下来*/ /*用export把方法暴露出来*/ /*定义存储搜索

  • vue路由跳转传递参数的方式总结

    日常业务中,路由跳转的同时传递参数是比较常见的,传参的方式有三种: 1)通过动态路由方式 //路由配置文件中 配置动态路由 { path: '/detail/:id', name: 'Detail', component: Detail } //跳转时页面 var id = 1; this.$router.push('/detail/' + id) //跳转后页面获取参数 this.$route.params.id 2)通过query属性传值 //路由配置文件中 { path: '/detail

  • Vue中keep-alive的两种应用方式

    Vue中keep-alive的使用我总结的有两种方式应用: 首先简述一下keep-alive的作用,kee-alive可以缓存不活动的的组件.当组件之间进行相互切换的时候,默认会销毁,当重新切换回来时又重新初始化.现在有需求切换回来不销毁组件,保持原来的状态,此时用keep-alive就可以实现了 我创建了两个组件,可以相互切换 组件1: 组件2: 第一种方式 在组件1的路由中添加 meta: { keepAlive: true }, 也就是当前路由需要缓存 此时路由设置完毕,keep-aliv

  • 详解vue父子组件状态同步的最佳方式

    哈喽!大家好!我是木瓜太香,一位老牌儿前端工程师,平时我们在使用 vue 开发的时候,可能会遇到需要父组件与子组件某个状态需要同步的情况,通常这个是因为我们封装组件的时候有一个相同的状态外面要用,里面也要用,今天我们就来看看怎么优雅的解决这个问题吧! 一般来说我们实现这个功能,只需要父组件通过 props 传递给子组件就好了,但是理想很丰满,现实很骨感,如果我们直接在子组件更改传进来的 props ,不出意外浏览器会给你一坨大红色的报错,因为在 vue 中我们的数据流动是自上而下的,而子组件直接

  • vue实现tab切换的3种方式及切换保持数据状态

    vue实现tab切换的3种方式及切换保持数据状态

    vue实现tab切换的3种方式 一.v-show控制内容切换 1.简单版原理:用点击事件改变num值作为开关,控制tab样式和内容显示隐藏. 2.数据渲染原理:主要利用v-for绑定的index来控制,跟上面差不多. 二.组件切换. 1.知识点主要是vue中is的特性,和keep-alive缓存 三.路由切换.(对地址栏和数据请求友好) 通过router-link实现. vue tab切换保持数据状态 页面做tab切换,由于组件每一次切换都会重新实例化组件,我们想要页面不论怎么切换都仍然保持ta

  • Vue实现两种路由权限控制方式

    目录 方式一:路由元信息(meta) 方式二:动态生成路由表(addRoutes) 路由权限控制常用于后台管理系统中,对不同业务人员能够访问的页面进行一个权限的限制. 对于无权限的页面可以跳转404页面或者提示无权限. 方式一:路由元信息(meta) 把所有页面都放在路由表中,只需要在访问的时候判断一下角色权限即可. vue-router 在构建路由时提供了元信息 meta 配置接口,我们可以在元信息中添加路由对应的权限,然后在路由守卫中检查相关权限,控制其路由跳转. 在 meta 属性里,将能

  • vue项目中封装echarts的优雅方式分享

    vue项目中封装echarts的优雅方式分享

    目录 场景 需求 代码总览 实现 components--chart--index.vue components--chart--index.js components--chart--options main.js chartTest index.vue index.js 代码 总结 补充 补充2:图表高亮轮询,dispatchAction使用 使用方法 附:echarts 饼图调用高亮示例 dispatchAction 补充3:封装echarts地图,姐妹篇 总结 场景 1.Echarts使

随机推荐