Vue格式化數(shù)據(jù)后切換頁(yè)面出現(xiàn)NaN問(wèn)題及解決
格式化數(shù)據(jù)后切換頁(yè)面出現(xiàn)NaN
目的
在一個(gè)vue項(xiàng)目中，需要對(duì)返回?cái)?shù)據(jù)的時(shí)間戳進(jìn)行格式化，數(shù)據(jù)格式如下
res = ?[ { "program_id": 6, "code": 1005,"create_time": 1627022366,?
?? ??? ??? ?"child": [ { "program_id": 7, "code": 1006, "create_time": 1627022366,} ] } ]問(wèn)題
利用遞歸進(jìn)行格式化，在computed中執(zhí)行，第一次顯示沒(méi)有問(wèn)題，但切換頁(yè)面后，時(shí)間顯示變成一行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是已格式完成的字符串
切換頁(yè)面會(huì)重新觸發(fā)computed，此時(shí)再執(zhí)行格式化會(huì)將字符串傳給formatTime格式化函數(shù)，formatTime接收了字符串會(huì)返回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)算有時(shí)候會(huì)出現(xiàn)NAN的情況
vue的html中，經(jīng)常會(huì)出現(xiàn)，需要對(duì)獲取的數(shù)據(jù)進(jìn)行加減乘除運(yùn)算的情況，如果在表達(dá)式中進(jìn)行運(yùn)算
例：{{ a + b + c }}
這種會(huì)導(dǎo)致，你在獲取數(shù)據(jù)的時(shí)候，值還沒(méi)取到，dom剛開始渲染，所以a，b，c的值做運(yùn)算，會(huì)顯示NAN，等到數(shù)據(jù)獲取結(jié)束，才會(huì)顯示運(yùn)算結(jié)果，對(duì)于這種短暫的NAN的閃現(xiàn)，往往會(huì)影響用戶體驗(yàn)
具體給出解決辦法
一種是加loading，通過(guò)loading來(lái)覆蓋NAN，另一種是在http請(qǐng)求的結(jié)果response.data中，直接賦值處理
如：
this.result = this.a + this.b + this.c
注意：這里的result必須在data屬性中定義，否則會(huì)報(bào)錯(cuò)。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹一下Vue.js并附上在Node.js環(huán)境下搭建一個(gè)簡(jiǎn)單的Demo實(shí)例代碼。條理清晰，有助于閱讀和理解。有需要的朋友可以看下2016-12-12
bpmn.js是一個(gè)BPMN2.0渲染工具包和web建模器,使得畫流程圖的功能在前端來(lái)完成,這篇文章主要給大家介紹了關(guān)于vue3集成bpmn.js的相關(guān)資料,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
vue實(shí)現(xiàn)消息向上無(wú)縫滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)消息向上無(wú)縫滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vue組件實(shí)現(xiàn)旋轉(zhuǎn)木馬動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了Vue組件實(shí)現(xiàn)旋轉(zhuǎn)木馬動(dòng)畫效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
Vue實(shí)現(xiàn)關(guān)聯(lián)頁(yè)面多級(jí)跳轉(zhuǎn)（頁(yè)面下鉆）功能的完整實(shí)例
這篇文章主要給大家介紹了關(guān)于Vue實(shí)現(xiàn)關(guān)聯(lián)頁(yè)面多級(jí)跳轉(zhuǎn)（頁(yè)面下鉆）功能的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
vue如何實(shí)現(xiàn)observer和watcher源碼解析
這篇文章主要為大家詳細(xì)介紹了vue如何實(shí)現(xiàn)observer和watcher源碼的相關(guān)資料，分析vue的observe實(shí)現(xiàn)源碼，聊聊如何一步一步實(shí)現(xiàn)$watch，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
Vue?echarts實(shí)例項(xiàng)目地區(qū)銷量趨勢(shì)堆疊折線圖實(shí)現(xiàn)詳解
Echarts，它是一個(gè)與框架無(wú)關(guān)的 JS 圖表庫(kù)，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計(jì)IONIC也能用，因?yàn)槲业牧?xí)慣，每次新嘗試做一個(gè)功能的時(shí)候，總要新創(chuàng)建個(gè)小項(xiàng)目，做做Demo2022-09-09
props 主要用于父組件向子組件通信,再父組件中通過(guò)使用:msg='msg'綁定需要傳給子組件的屬性值,然后再在子組件中用props接收該屬性值,這篇文章主要介紹了vue3的組件通信&v-model使用,需要的朋友可以參考下2024-05-05
vue3+js+elementPlus使用富文本編輯器@vueup/vue-quill詳細(xì)教程
富文本編輯器在任何項(xiàng)目中都會(huì)用到,下面這篇文章主要給大家介紹了關(guān)于vue3+js+elementPlus使用富文本編輯器@vueup/vue-quill的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
Vue監(jiān)聽器簡(jiǎn)單使用及注意事項(xiàng)說(shuō)明
這篇文章主要介紹了Vue監(jiān)聽器簡(jiǎn)單使用及注意事項(xiàng)說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08