vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue格式化数据切换页面NaN

Vue格式化数据后切换页面出现NaN问题及解决

作者:大佬,咋整啊

这篇文章主要介绍了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属性中定义,否则会报错。

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

您可能感兴趣的文章:
阅读全文