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

目录

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

Vue按回车键进行搜索

需求：

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

第一种方法

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

      

搜索

第二种方法

      

搜索
 

注：

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

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

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

Vue使用回车键失效的解决

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

Vue回车键事件

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

@keyup.enter="方法名"

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

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

栗子

        

 

    搜索

回车失效原因

查考相关文档得知：

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

解决方法

 标签上添加 @submit.native.prevent。

• @submit: 表单提交
• .native 绑定系统原生事件
• .prevent 提交以后不刷新页面

总结

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