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

目录
  • 格式化数据后切换页面出现NaN
    • 目的
    • 问题
    • 原因
    • 解决方案
  • 数字运算有时候会出现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属性中定义，否则会报错。

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

赞 (0)

相关推荐

  • Vue 路由切换时页面内容没有重新加载的解决方法

    第二次进入页面,页面路由参数已经改变,但是页面内容不会刷新. 问题原因:在组件mounted钩子中调用的刷新页面内容,但测试发现这个钩子没有被调用.后来发现App.vue中使用了<keep-alive>: <template> <div id="app"> <keep-alive> <router-view></router-view> </keep-alive> </div> </t

  • 解决vue项目中页面调用数据 在数据加载完毕之前出现undefined问题

    在项目中遇到后台数据还没有加载完毕,但是页面上调用了后台数据中的字段,这样就会报undefined. 例如:一进入页面直接回显数据. 我在created里面请求接口进行赋值 this.matterAll=[]; 会报accessItemName为undefined: 原因以及解决办法: 在上面data()中,我定义了matterAll:[],也就是空的数组, template中,我又直接用了this.matterAll[0],这个时候this.matterAll[0]=undefined,所以t

  • vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作

    vuex数据改变,组件中页面不渲染 相信许多vuex新手都会遇到这样的问题: vuex数据更新后,插件中使用数据的地方没有更新 这样的代码 data() { return { tableData: this.$store.state.AdminInfo }; } 然后在 template 中使用 tableData <el-table :data="tableData" class="tablePst"> <el-table-column labe

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

    目录 格式化数据后切换页面出现NaN 目的 问题 原因 解决方案 数字运算有时候会出现NAN的情况 具体给出解决办法 格式化数据后切换页面出现NaN 目的 在一个vue项目中,需要对返回数据的时间戳进行格式化,数据格式如下 res =  [ { "program_id": 6, "code": 1005,"create_time": 1627022366,              "child": [ { "pro

  • vue使用v-if v-show页面闪烁,div闪现的解决方法

    在页面层次结构,数据较多的时候,用v-if或者v-show就会出现div闪现,或者部分闪烁的结果. 可以在根元素添加v-cloak来解决,并且设置它的样式即可. 代码只是示例,还需要自己修改测试. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style>

  • vue打包后出现空白页的原因及解决方式详解

    vue打包后出现空白页的原因及解决方式详解

    目录 路由模式 history 路由模式 hash 总结 1. 修改路径 2. 更改路由模式 路由模式拓展 路由的hash和history模式的区别 打包路由选择 路由模式 history 新建项目什么都不动,路由模式:history, 直接npm run build打包 打包之后,直接打开dist文件里面的ndex.html可以看到页面是空白的,控制台是这样的. 再看看网页源码, 对比dist文件夹结构可以看到资源路径的引入是错误的,应该用'./'而不是'/' 那怎么修改打包之后的路径呢?查看

  • 基于vue打包后字体和图片资源失效问题的解决方法

    1. vue打包后font-awesome字体失效 解决方案: 2. 打包后图片资源失效 解决方案: 针对html中引用的图片 针对css添加的背景中引用的图片 以上这篇基于vue打包后字体和图片资源失效问题的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: 解决vue打包之后静态资源图片失效的问题 vue cli使用绝对路径引用图片问题的解决 详谈vue+webpack解决css引用图片打包后找不到资源文件的问题 vue-cli中打包

  • 解决vue打包后刷新页面报错：Unexpected token <

    前言 今天遇到了一个很怪的问题,在vue-cli+webpack的项目中,刷新特定页面后页面会变空白,报错为index.html文件中Unexpected token <. 怪点一是开发环境没有问题,只有生产环境有问题,怪点二是只有一个页面有问题,其他页面完全正常 正文 报错截图: 根据上面的情况和以往经验,应该在index.html页面及发生错误的页面定位问题,但均解决不了问题. 最后找到此项目的路由处,经过多次测试,解决问题,也确定了问题原由,原来是:路由中path的值不能以小写m开头,否则

  • vue两次赋值页面获取不到的解决

    目录 两次赋值页面获取不到 第一种方法 第二种方法 vue赋值不成功问题 两次赋值页面获取不到 vue两次赋值console.log出来的值为第二次赋的值尔页面显示的是第一次赋的值 getform(){ //api3 var _this=this var formSchemad=_this.formSchema console.log(_this.formSchema) axios({ method:'get', url:'odoo/mobile/api3/jsonui?id=xxxx' }).

  • destoon整合ucenter后注册页面不跳转的解决方法

    通常采用ucenter来做中介,添加多个应用然后使多个站点有同步登录退出的功能. ucenter添加应用并不难,destoon官网上也有相关的教程. 但是很多朋友在几个应用添加完毕以后,注册一个帐号测试的时候,问题就出现了,注册完以后,注册页面没有跳转,也没有提示,但这个会员是注册成功了.为什么没有跳转呢? 经过断点测试发现这是因为在Destoon的api/ucenter/control/user.php 文件中的第83行有一个写Dscuz系统数据库的函数在默认执行:function onreg

  • vue引入elementUi后打开页面报错Uncaught TypeError的解决方式

    vue引入elementUi后打开页面报错Uncaught TypeError的解决方式

    vue引入elementUi后打开页面报错 本人在用idea创建vue项目并引入elemenUi之后网页报错:Uncaught TypeError: Cannot read properties of undefined(reading ‘prototype’). 百度了很多办法都说是因为在vue3中引入了elementUi,vue3.0之后是不支持elementUi的,要使用element plus,但是因为我想用若依偷懒,所以必须得用elementUi,很多文章说是vue - V命令查看vu

  • .net 弹出消息框后导致页面样式变乱解决方法

    点击按钮,执行提交操作,弹出消息框后,页面的样式变乱,解决方法: 首先,确定使用的css样式正确,页面中的宽高值保持规范统一: 然后,弹出框避免使用Response.Write(),如下所示 复制代码 代码如下: Response.Write("<script language=javascript>"); Response.Write("window.alert('"); Response.Write("计划添加失败!"); Res

  • vue 每次渲染完页面后div的滚动条保持在最底部的方法

    实例如下: //每次页面渲染完之后滚动条在最底部 updated:function(){ this.$nextTick(function(){ var div = document.getElementById('dialogue_box'); div.scrollTop = div.scrollHeight; }) } //第一次页面渲染完之后滚动条在最底部 methods:function(){ this.$nextTick(function(){ var div = document.ge

随机推荐