Vue格式化數據後切換頁面出現NaN問題及解決

Posted on by

格式化數據後切換頁面出現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屬性中定義，否則會報錯。

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：