Vue enter回车导致页面刷新问题及解决

更新时间：2022年10月10日 16:33:49 作者：范特西Fantasy

这篇文章主要介绍了Vue enter回车导致页面刷新问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

Vue enter回车导致页面刷新

分页中需要输入页码进行跳转，但是却出现跳到指定页面后，页面也刷新了。从而无法满足无刷新的分页。最初代码如下:

<form class="zh-skip" action="">
    <input type="number" v-model="pageNumber" oninput="if(value<1)value=1" @keyup="goPageKeyUp($event)">
    <button class="zh-btn-blue" type="button" @click="goPage()">跳转</button>
</form>

网上找资料后，得知造成页面刷新的原因是:

外层有form表单，回车导致form表单提交

解决方法

（1）去除外面的form表单

（2）在form表单内加一个input文本框，一个表单下，如果只有一个文本框时，按下回车将会触发表单的提交事件

（3 ）在input加阻止事件

<input onkeypress="if (event.keyCode == 13) showResult();"/>

Vue按下enter默认刷新页面bug

vue按下enter默认刷新页面，原因是form表单里按下键盘会默认提交表单，而刷新页面。

解决

代码

@submit.native.prevent

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

您可能感兴趣的文章:

vue使用tracking实现人脸识别/人脸侦测完整代码
作为一个AI模型,人脸识别涉及到多个技术领域,下面这篇文章主要给大家介绍了关于vue使用tracking实现人脸识别/人脸侦测的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-09-09
vue实现虚拟滚动渲染成千上万条数据
本文主要介绍了vue实现虚拟滚动渲染成千上万条数据，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-02-02
使用vue ant design分页以及表格分页改为中文问题
这篇文章主要介绍了使用vue ant design分页以及表格分页改为中文问题，具有很好的参考价值，希望对大家有所帮助。
2023-04-04
详解vue中localStorage的使用方法
这篇文章主要介绍了详解vue中localStorage的使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-11-11
探讨Vue.js的组件和模板
指令是Vue.js中一个重要的特性，主要提供了一种机制将数据的变化映射为DOM行为。下面通过本文给大家分享Vue.js的组件和模板，需要的朋友参考下吧
2017-10-10
vue+three.js实现炫酷的3D登陆页面示例详解
这篇文章主要为大家介绍了vue+three.js实现炫酷的3D登陆页面示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
vue移动端项目渲染pdf步骤及问题小结
这篇文章主要介绍了vue移动端项目渲染pdf步骤,vue-pdf的插件在使用的过程中是连连踩坑的，基本遇到3个问题，分别在文中给大家详细介绍，需要的朋友可以参考下
2022-08-08
Vue首屏时间指标采集最佳方式详解
这篇文章主要为大家介绍了Vue首屏时间指标采集最佳方式示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-01-01
vue生命周期和react生命周期对比【推荐】
本文通过实例代码给大家介绍了vue生命周期和react生命周期对比 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-09-09
Vue3+Vite4项目进行性能优化的配置方案
这篇文章主要为大家详细介绍了Vue3如何结合Vite4对项目进行性能优化的相关配置,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
2025-04-04