Vue格式化數(shù)據(jù)后切換頁面出現(xiàn)NaN如何解決

這篇文章主要介紹“Vue格式化數(shù)據(jù)后切換頁面出現(xiàn)NaN如何解決”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue格式化數(shù)據(jù)后切換頁面出現(xiàn)NaN如何解決”文章能幫助大家解決問題。

格式化數(shù)據(jù)后切換頁面出現(xiàn)NaN

目的

在一個vue項目中，需要對返回數(shù)據(jù)的時間戳進行格式化，數(shù)據(jù)格式如下

res =  [ { "program_id": 6, "code": 1005,"create_time": 1627022366, 
            "child": [ { "program_id": 7, "code": 1006, "create_time": 1627022366,} ] } ]

問題

利用遞歸進行格式化，在computed中執(zhí)行，第一次顯示沒有問題，但切換頁面后，時間顯示變成一行NaN

formatProjectList (list) {
  let projectList = list.map((item) => {
  // formatTime是格式化函數(shù)，返回'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函數(shù)中，item.create_time 直接修改了源數(shù)據(jù)res，res是已格式完成的字符串

切換頁面會重新觸發(fā)computed，此時再執(zhí)行格式化會將字符串傳給formatTime格式化函數(shù)，formatTime接收了字符串會返回NaN

解決方案

將源數(shù)據(jù)res進行深拷貝，再執(zhí)行該函數(shù)

computed: {
  projectList () {
      // deepClone 是深拷貝函數(shù)
      let newList = deepClone(res.data.list)
      let formatList = this.formatProjectList(newList)
      return formatList
    }
  }

數(shù)字運算有時候會出現(xiàn)NAN的情況

vue的html中，經(jīng)常會出現(xiàn)，需要對獲取的數(shù)據(jù)進行加減乘除運算的情況，如果在表達式中進行運算

例：{{ a + b + c }}

這種會導致，你在獲取數(shù)據(jù)的時候，值還沒取到，dom剛開始渲染，所以a，b，c的值做運算，會顯示NAN，等到數(shù)據(jù)獲取結束，才會顯示運算結果，對于這種短暫的NAN的閃現(xiàn)，往往會影響用戶體驗

具體給出解決辦法

一種是加loading，通過loading來覆蓋NAN，另一種是在http請求的結果response.data中，直接賦值處理

如：

this.result = this.a + this.b + this.c

注意：這里的result必須在data屬性中定義，否則會報錯。

關于“Vue格式化數(shù)據(jù)后切換頁面出現(xiàn)NaN如何解決”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識，可以關注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。