vue回车文本框,第一次会刷新页面问题

参考链接:https://blog.csdn.net/Phillip_Coulson/article/details/107838034

使用vue开发,页面文本框在点击回车时会刷新页面,而且只有第一次会触发刷新。

例子

1、打开两个功能【错误码查询】和【白名单管理】,在这个文本框输入任何字符后,回车

vue回车文本框,第一次会刷新页面问题_第1张图片

2、回车后页面进行了刷新,跳转 url中也多出了?

vue回车文本框,第一次会刷新页面问题_第2张图片

3、刷新下后置剩下一个导航栏了

vue回车文本框,第一次会刷新页面问题_第3张图片

 4、再次回车查询正常,不会刷新了

解决过程

 1、问题代码如下:


      
        
      
      
        查询
      

2、点击回车按钮后不仅页面会刷新,并且路由多了一个问号

http://localhost:8001/?#

3、经查阅资料得知原因,在当前页面元素中只有一个文本框时,点击回车时会自动提交表单

 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.
当表单中只有一个单行文本输入框时,客户端应该接受该区域中的Enter作为提交表单的请求

解决方案

 在form标签中加入@submit.native.prevent阻止事件即可:


      
        
      
      
        查询
      

 

你可能感兴趣的:(vue,vue)