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屬性中定義，否則會報錯。

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