记一次前端bug：前端vue列表查询出现重复数据的情况

最新推荐文章于 2023-11-23 08:55:12 发布
最新推荐文章于 2023-11-23 08:55:12 发布
阅读量3.4k 收藏 5
点赞数 3
文章标签： java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SHUKAI618/article/details/117674884
版权
在前端开发中，遇到Vue分页查询时列表显示重复数据的问题。虽然接口返回数据正常，但在Preview中数据显示异常。原因在于JavaScript的Number类型在处理超过17位的Long型数字时会丢失精度，将超出部分转换为0。解决方案是调整数据库ID字段长度，避免Long转Number导致精度丢失，或者将Long类型转换为String类型。问题源头是数据库脚本迁移时ID初始值过大。
摘要由CSDN通过智能技术生成

​ 最近开发遇到一个奇怪的问题：页面列表分页查询时出现很多条完全相同的数据，打完断点，发现接口查询出来的数据时没问题的，没有重复的，但是页面显示的时候就出问题，数据重复：

image-20210607204128429

在前端页面的请求结果中发现：Network中Response里得到的数据时正常的，但是Preview里面的数据就出现了重复的情况

正常数据：

image-20210607204819979

Preview里面分页的10条数据出现多条重复数据

image-20210607205118575

经过梳理：

NetWork中的 preview 是错误的，而response 的值却是正确的。

使用Postman来进行请求，发现请求值也是正确的，那么问题可能就出在前端了。

查询原因：

在Preview中，控制台会把发送过来的j

最低0.47元/天 解锁文章
SHUKAI618
关注
1万条数据大概占多大空间_Vue - Table表格渲染上千数据优化
weixin_39687814的博客
11-20 986
这次项目经验会谈谈经常在项目中，针对成千上万数据渲染优化的不断探索来谈谈自己的体会，其目的就是保证用户浏览上万条数据的时候，UI要很流畅，确保用户操作过程中不会出现UI卡顿或者最糟糕的情况，直接浏览器奔溃。其优化目录如下，由于内容很多，会分两篇文章进行研究，本文章主要会围绕如何设计一个虚拟滚动来渲染成千上万的数据。1.表格布局（To be continue）2.Reflow & Repai...
vue中关于检索框重复带出数据问题解决 VUE
我就是Kit
03-16 612
最近一直在做vue的项目，遇到了很多的坑，今天遇到的是检索的时候带出的重复数据问问题。 其实解决的方式就是直接在检索的时候给它删除掉那条数据，代码如下: $("#"+id).remove(" 请选择"); ...
【前端】vue3+ts+vite，el-table表格渲染记录重复情况
最新发布
小5聊的博客
11-23 1327
在使用vue的过程中，总会遇到一些有疑问的地方，总结就能够加深印象，下次再出现的时候也有个参考的地方。
vue评论列表数据重复(用vant组件)
m0_60855156的博客
11-30 1069
vant使用列表组件,回复列表数据重复 使用列表下方immediate-check属性关闭
Ant Design of Vue 表格数据 重复渲染
qq_42957667的博客
08-26 2538
Ant Design of Vue 表格数据 重复渲染 初次使用Ant Design of Vue 框架遇到表格数据重复渲染的解决办法 重要的都标注了 就是这样的表格 // 组件 <a-table :columns="columns" :data-source="mainDatas" class="components-table-demo-nested" bordered :pagination="pagination" @expand="clickExpand" // 展开图标触发
绿豆pro前端APP源码v5.1.8前端源码 插件版java VUE案列 苹果cms
05-29
【标题】"绿豆pro前端APP源码v5.1.8前端源码 插件版java VUE案列 苹果cms"所提及的是一个基于Vue.js开发的前端应用程序源码，版本为5.1.8，专为苹果CMS内容管理系统设计。这个项目集成了插件功能，并且进行了UI界面...
前端基础积累-新技术-Vue-React-H5-奇怪的BUG-面试-招聘.zip
08-06
首先，Vue.js是一款轻量级的JavaScript框架，以其易学易用、组件化和高效的性能受到开发者喜爱。Vue的核心特性包括指令系统（如v-if和v-for）、组件化开发、响应式数据绑定以及计算属性。面试中，Vue的相关问题可能...
vue-preview-bug:vue-preview使用Bug
04-08
Vue.js 是一款非常流行的前端框架，用于构建用户界面。在开发过程中，我们常常需要处理图片预览的功能，这时`vue-preview`就派上了用场。`vue-preview`是一款专为Vue设计的图片预览和灯箱插件，它提供了一种简洁而...
【con】vue项目里basic auth验证（前端bug日记4）
Lexie_con的博客
07-26 1816
以为需要ntlm，结果很快解决了。
前端数据展示数据重复，生产环境数仓排错的小记
Doris0214的博客
12-05 483
思路： 数仓的表的数据出现错误，思路基本上就是逆推，根据错误所在的表不断往上一个个推这个错误的字段所在的表。 过程大致描述： 前端数据展示时，一家公司的指标出现了重复展示，如平均值，则需要找到这张表，在工作流里面找到其对应的来源表，如被用来关联产生该结果表的总价格表和总数量表。总之，层层往上找，最后发现是源头的一张手动维护的表数据出现了问题，该公司对应了两个简称。 解决办法： 由于该表非事务表，需...
vue项目 接口中对获取到的数据进行双重for循环导致页面不渲染
xiaoyugan000的博客
05-12 1947
今天跟朋友解决一个vue项目中的问题，大概意思是： 前端向后端发送接口请求，请求成功之后，后端返回了一个数组，数组中包含了上百条数据。而我们需要做得是将这上百条数据以每组20条的形式渲染到页面上。 我和朋友的解决办法是： 定义一个空数组，这个空数组里面的元素也是空数组，然后循环返回的包含了上百条数据的数组，将前20条数据放进第一个为空数组的元素中，然后利用splice将原数组的前20条数据删除，跳出循环。以下为代码： getSell(){ topicList({需要传的数据}).then(
axiso 拦截器
qq_40924034的博客
11-23 201
axiso 拦截器 > let cancelToken = axios.CancelToken const REQUEST_LIST = [] const removePending = config => { for(let p in REQUEST_LIST){ if (REQUEST_LIST[p].u === config.url) { REQUE...
当在Vue项目中渲染数据重复的问题（去重）
weixin_46319117的博客
03-11 1937
this.projectNameData = res.data.data //去掉重复的数据 var hash = {}; this.projectNameData = this.projectNameData.reduce(function (item, next) { hash[next.projectPresetId] ? '' : hash[next.projectPresetId] = true &
vue数组中有相同的数据处理
热门推荐
琉夕东流
12-23 1万+
跟ng一样，vue的数组中有相同的数据时会报错Uncaught (in promise) TypeError 例如： {{item.message}} data:{ items:[ { message: 'Foo' }, { message: 'Bar' }
vue v-for一次循环两项
李程程的博客
04-14 4906
vue v-for一次循环两项 <template> <div> <!-- 只要姓名 一次循环两项只要第一个值--> <li v-for="(v,index) in data.nameList" v-if="index % 2 == 0"> 姓名：<span>{{data.nameList[index]}}</span> </li> <!-- 姓名与年龄 一次循环两项两个值都要-->
vue踩坑笔记：制作vue页面时组件重复出现
Tendo_Maya的博客
12-01 1478
想用vue写个登录界面的时候，发现组件居然重复出现了。 搜了一下发现是外层路由配置搞的鬼。 在main.js里面： 把框起来的部分删掉就可以了！（如下图） 保存后再运行就是正常的，组件不会重复出现啦！ ...
删除数组中重复的元素vue
gyz15731998001的博客
09-26 2309
vue如何删除数组中重复的元素
vue监测input输入自动查询
juceli的博客
09-06 5940
Vue.js 有一个方法 watch，它可以用来监测Vue实例上的数据变动。 如果对应一个对象，键是观察表达式，值是对应回调，值也可以是方法名，或者是对象，包含选项。   下面写两个demo，参考demo来了解一下 demo1 &lt;template&gt; &lt;div&gt; &lt;el-input v-model="demo"&gt;&lt;/el-input&...
Java与前端开发：Vue指令与Bug修复
Vue.js是一个流行的前端JavaScript框架，用于构建用户界面。下面我们将深入探讨Vue的安装过程、运行指令以及一些常见的bug及其解决方法。 首先，Vue的安装和运行通常通过Node Package Manager (npm) 进行。在终端中...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值