Vue格式化數(shù)據(jù)后切換頁面出現(xiàn)NaN問題及解決
格式化數(shù)據(jù)后切換頁面出現(xiàn)NaN
目的
在一個vue項目中，需要對返回數(shù)據(jù)的時間戳進(jìn)行格式化，數(shù)據(jù)格式如下
res = ?[ { "program_id": 6, "code": 1005,"create_time": 1627022366,?
?? ??? ??? ?"child": [ { "program_id": 7, "code": 1006, "create_time": 1627022366,} ] } ]問題
利用遞歸進(jìn)行格式化，在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進(jìn)行深拷貝，再執(zhí)行該函數(shù)
computed: {
? projectList () {
?? ? ?// deepClone 是深拷貝函數(shù)
? ? ? let newList = deepClone(res.data.list)
? ? ? let formatList = this.formatProjectList(newList)
? ? ? return formatList
? ? }
? }數(shù)字運(yùn)算有時候會出現(xiàn)NAN的情況
vue的html中，經(jīng)常會出現(xiàn)，需要對獲取的數(shù)據(jù)進(jìn)行加減乘除運(yùn)算的情況，如果在表達(dá)式中進(jìn)行運(yùn)算
例：{{ a + b + c }}
這種會導(dǎo)致，你在獲取數(shù)據(jù)的時候，值還沒取到，dom剛開始渲染，所以a，b，c的值做運(yùn)算，會顯示NAN，等到數(shù)據(jù)獲取結(jié)束，才會顯示運(yùn)算結(jié)果，對于這種短暫的NAN的閃現(xiàn)，往往會影響用戶體驗
具體給出解決辦法
一種是加loading，通過loading來覆蓋NAN，另一種是在http請求的結(jié)果response.data中，直接賦值處理
如：
this.result = this.a + this.b + this.c
注意：這里的result必須在data屬性中定義，否則會報錯。
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
今天小編就為大家分享一篇關(guān)于Vuex中的State使用介紹，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)全選和反選功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
vue中使用el-table組件checkbox進(jìn)行分頁多選，回顯、切換分頁記住上一頁所勾選和取消的選項(示例代碼)
這篇文章主要介紹了vue中使用el-table組件checkbox進(jìn)行分頁多選，回顯、切換分頁記住上一頁所勾選和取消的選項本文通過示例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
這篇文章主要介紹了使用vue實現(xiàn)各類彈出框組件,文中給大家提到了vue中常用的dialog組件的封裝，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2019-07-07
這篇文章主要介紹了詳解vue配置請求多個服務(wù)端解決方案，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要介紹了Vue實現(xiàn)table上下移動功能,結(jié)合實例形式分析了vue.js針對table表格元素動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下2019-02-02
今天小編就為大家分享一篇關(guān)于在Vue項目中引入JQuery-ui插件的講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
vue 路由視圖 router-view嵌套跳轉(zhuǎn)的實現(xiàn)
這篇文章主要介紹了vue 路由視圖 router-view嵌套跳轉(zhuǎn)，主要實現(xiàn)的內(nèi)容有制作一個登錄頁面，跳轉(zhuǎn)到首頁，首頁包含菜單欄、頂部導(dǎo)航欄、主體，標(biāo)準(zhǔn)的后臺網(wǎng)頁格式，菜單點擊顯示不同的頁面，感興趣的小伙伴請參考下面文章內(nèi)容2021-09-09
vue-element換膚所有主題色和基礎(chǔ)色均可實現(xiàn)自主配置
這篇文章主要介紹了vue-element換膚所有主題色和基礎(chǔ)色均可實現(xiàn)自主配置，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要為大家介紹了vue3.2?Composition?API項目依賴升級示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08