vue项目搜索页面，点击搜索按钮button页面l刷新2次问题解决（亲测可用！）

已于 2023-06-29 21:01:04 修改
阅读量457 收藏
点赞数
分类专栏： vue 文章标签： 前端 vue.js
于 2023-06-29 21:00:48 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cddcj/article/details/131464227
版权
文章讲述了在Vue项目开发中遇到的一个问题，即点击搜索按钮时页面无故刷新两次。原因是原生button标签的type默认为submit，在非IE浏览器下会导致表单提交，从而刷新页面。解决方法是将button的type属性改为button，使其变为无提交行为的普通按钮，从而避免页面刷新。
摘要由CSDN通过智能技术生成

vue遇到了一个奇葩的问题，接口什么都没调用但是点击搜索按钮button页面连续刷新两次

起因：写项目时 用原生写了一个按钮，点击页面会刷新

<button type="submit" @click="search()"><i class="iconfont icon-search"></i>搜索</button>

原生按钮button默认type='submit'这个属性值是默认具有表单提交功能的，所以在非IE浏览器下会存在点击后刷新页面的问题。

 在原生button按钮中更改type='button'属性值就可以了，此时它就是一个单纯的按钮了。

这样就OK了！！

cc蒲公英
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue搜索页面.zip
04-14
页面框架采用vant的vue搜索功能页面
vue中实现搜索按钮功能
qwerrerfjj的博客
01-09 2051
【代码】vue中实现搜索按钮功能。
Vue实现搜索页面
STRainie的博客
07-22 3154
实现功能如下图所示：（因为被腰斩，样式未调整） 直接上代码： pages/Search.vue //搜索页 <template> <div class="search-page"> <page-header></page-header> <keep-alive> //keep-alive包裹需更新组件 <search-content></se
vue @click 多次触发解决
JAVA5G的专栏
05-25 9629
场景： 提示：同事写了个普通的点击事件： 例如：@click="xxx"xxx是点击事件要执行的 结果每次点击就会触发两次 问题描述 提示：这里描述项目中遇到的问题： 。 解决方案： 提示：这里填写该问题的具体解决方案： 例如： @click="xxx($event)" xxx(e){ e.preventDefault(); } 当然 如果你是一次性的不需要多去触发去更新状态 可以用vue的 v-on:click.once="xxx" xxx就是对应的点击方法 ...
Vue搜索功能
qq_34227291的博客
04-08 1529
Vue搜索功能 知识点：v-model数据双向绑定，绑定对象是input 效果图： HTML <template> <div id="search"> <header> <div class="header_input"> <!-- 绑定search并在data定义值为空 --> <input type=...
vue+element的表格实现批量删除功能示例代码
10-18
点击按钮时，会触发removeBatch方法，该方法负责收集被选中行的id，并进行删除前的二次验证。如果通过验证，将向后端发送删除请求，并在请求成功后更新表格数据。 总结来说，批量删除功能的实现主要涉及以下几个...
将按钮置灰
10-29
例如，在网络未连接的情况下，刷新按钮可能会被置灰，提示用户需先解决网络问题。此外，如果某项操作正在进行中，如文件上传或数据处理，为了避免用户重复提交，相应的按钮也会被设为灰色。 实现“将按钮置灰”的...
element-ui如何防止重复提交的方法步骤
10-15
另外，为避免因页面无刷新而导致的重复提交问题，可以采用节流（throttle）或防抖（debounce）技术限制按钮的点击频率。例如，可以设置一个定时器，在点击后一定时间内不允许再次点击。 第三种情况是提交操作导致...
lovely-login:(｀・ω・´) 挺可爱的登陆界面
05-04
开发者可能选择了通过JavaScript（可能配合Vue.js的API）来监听表单的提交事件，使用AJAX（Asynchronous JavaScript and XML）或者fetch API进行异步数据交换，这样用户在点击登录按钮时，数据可以无刷新地发送到...
html+css+js网页设计登录界面
最新发布
03-13
AJAX（Asynchronous JavaScript and XML）技术允许不刷新整个页面的情况下发送数据到服务器，提高用户体验。 在"Responsive_Furniture_Shop_Website-main"这个项目中，开发者可能包含了HTML文件（如`index.html`）...
vue 实现搜索的结果页面支持全选与取消全选功能
10-17
主要介绍了vue 实现搜索的结果页面支持全选与取消全选功能，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
基于Vue.js实现简单搜索框
10-21
主要为大家详细介绍了基于Vue.js实现简单搜索框,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
【VUE】Vue2菜单搜索并跳转指定页面
SZnAl的博客
03-28 2768
有时候后台管理系统复杂的菜单结构与更深的层级使用户无法快速找到自己所需的页面，如何提高后台管理系统的便捷度并且使系统与用户的交互更加灵活成为了项目在基础功能之外更重要的追求。菜单目录支持搜索并且可直接跳转便可以达到以上诉求。
vue电商项目(三)——开发search页面
a_bowl_rice的博客
12-23 728
search组件部分
[vue-cli]在使用vue-cli开发vue项目时，自动刷新页面的原理你了解吗？
歌谣的博客
01-15 1433
[vue-cli]在使用vue-cli开发vue项目时，自动刷新页面的原理你了解吗？ 自动刷新页面并不是vue-cli的功能，而是webpack的hot-module-replacement-plugin插件在做这件事，这个插件是webpack自带的插件，用来做hmr的。如果需要配置hmr只需要在webpack.config.js的devServer字段写 下面的配置即可。 { contentBase: 服务器可以访问的根目录, hot:true, //开启热模块替换也就是hmr hotOnly:true
vue刷新页面及路由跳转到同一页面的刷新问题
热门推荐
chen_i
12-19 2万+
一、直接刷新当前页面的方法 this.$router.go(0) 二、路由跳转到同一页面不刷新（页面内的路由跳转） 下面展示了一个vue组件的跳转逻辑，通过router-view的key不断更新，确保每次跳转到的路由好像是不一样的，实现每次进行路由跳转都会刷新。这样写在性能上可能有一些问题（未验证） <template> <el-aside id="issho...
vue进入页面刷新刷新一次或者多次
qq_44693047的博客
07-01 680
vue进入页面刷新一次或者多刺
vue路由点击事件跳转两次的bug
qq_43959639的博客
10-01 788
原因a标签没设置src="javascript:;"
Vue3：页面A搜索后跳转到页面B，然后从页面B退回页面A重新搜索，但是得到的页面B得刷新一下才会显示正确的数据
无面人的博客
08-09 584
Vue3：页面A搜索后跳转到页面B，然后从页面B退回页面A重新搜索，但是得到的页面B得刷新一下才会显示正确的数据
Vue电商后台开发：Echarts数据可视化与Spu管理功能详解
2. 表格操作与数据管理：开发人员正在处理表格组件，当用户点击“添加”按钮时，新添加的销售属性数据需要实时更新到table中，作为对象存储。这涉及数据收集、整理和动态响应，确保表格数据的一致性和准确性。 3. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值