Vue格式化数据后切换页面出现NaN问题及解决
更新时间：2022年06月05日 14:18:03 作者：大佬，咋整啊
这篇文章主要介绍了Vue格式化数据后切换页面出现NaN问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
格式化数据后切换页面出现NaN
目的
在一个vue项目中，需要对返回数据的时间戳进行格式化，数据格式如下
res = [ { "program_id": 6, "code": 1005,"create_time": 1627022366,
"child": [ { "program_id": 7, "code": 1006, "create_time": 1627022366,} ] } ]问题
利用递归进行格式化，在computed中执行，第一次显示没有问题，但切换页面后，时间显示变成一行NaN
formatProjectList (list) {
let projectList = list.map((item) => {
// formatTime是格式化函数，返回'Y-m-d H:i:s'格式的字符串
item.create_time = formatTime(new Date( item.create_time * 1000 ), 'Y-m-d H:i:s')
if (item.child) { this.formatProjectList (item.child) }
return item
})
return projectList
},原因
在map函数中，item.create_time 直接修改了源数据res，res是已格式完成的字符串
切换页面会重新触发computed，此时再执行格式化会将字符串传给formatTime格式化函数，formatTime接收了字符串会返回NaN
解决方案
将源数据res进行深拷贝，再执行该函数
computed: {
projectList () {
// deepClone 是深拷贝函数
let newList = deepClone(res.data.list)
let formatList = this.formatProjectList(newList)
return formatList
}
}数字运算有时候会出现NAN的情况
vue的html中，经常会出现，需要对获取的数据进行加减乘除运算的情况，如果在表达式中进行运算
例：{{ a + b + c }}
这种会导致，你在获取数据的时候，值还没取到，dom刚开始渲染，所以a，b，c的值做运算，会显示NAN，等到数据获取结束，才会显示运算结果，对于这种短暂的NAN的闪现，往往会影响用户体验
具体给出解决办法
一种是加loading，通过loading来覆盖NAN，另一种是在http请求的结果response.data中，直接赋值处理
如：
this.result = this.a + this.b + this.c
注意：这里的result必须在data属性中定义，否则会报错。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍一下Vue.js并附上在Node.js环境下搭建一个简单的Demo实例代码。条理清晰，有助于阅读和理解。有需要的朋友可以看下2016-12-12
bpmn.js是一个BPMN2.0渲染工具包和web建模器,使得画流程图的功能在前端来完成,这篇文章主要给大家介绍了关于vue3集成bpmn.js的相关资料,文中通过代码示例介绍的非常详细,需要的朋友可以参考下2024-01-01
这篇文章主要为大家详细介绍了vue实现消息向上无缝滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要为大家详细介绍了Vue组件实现旋转木马动画效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
这篇文章主要给大家介绍了关于Vue实现关联页面多级跳转（页面下钻）功能的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要为大家详细介绍了vue如何实现observer和watcher源码的相关资料，分析vue的observe实现源码，聊聊如何一步一步实现$watch，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
Vue echarts实例项目地区销量趋势堆叠折线图实现详解
Echarts，它是一个与框架无关的 JS 图表库，但是它基于Js，这样很多框架都能使用它，例如Vue，估计IONIC也能用，因为我的习惯，每次新尝试做一个功能的时候，总要新创建个小项目，做做Demo2022-09-09
props 主要用于父组件向子组件通信,再父组件中通过使用:msg='msg'绑定需要传给子组件的属性值,然后再在子组件中用props接收该属性值,这篇文章主要介绍了vue3的组件通信&v-model使用,需要的朋友可以参考下2024-05-05
vue3+js+elementPlus使用富文本编辑器@vueup/vue-quill详细教程
富文本编辑器在任何项目中都会用到,下面这篇文章主要给大家介绍了关于vue3+js+elementPlus使用富文本编辑器@vueup/vue-quill的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-07-07
这篇文章主要介绍了Vue监听器简单使用及注意事项说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
最新评论