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ù)獲取結(jié)束，才會顯示運算結(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)文章
本文主要介紹一下Vue.js并附上在Node.js環(huán)境下搭建一個簡單的Demo實例代碼。條理清晰，有助于閱讀和理解。有需要的朋友可以看下2016-12-12
bpmn.js是一個BPMN2.0渲染工具包和web建模器,使得畫流程圖的功能在前端來完成,這篇文章主要給大家介紹了關(guān)于vue3集成bpmn.js的相關(guān)資料,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2024-01-01
這篇文章主要為大家詳細介紹了vue實現(xiàn)消息向上無縫滾動效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要為大家詳細介紹了Vue組件實現(xiàn)旋轉(zhuǎn)木馬動畫效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
Vue實現(xiàn)關(guān)聯(lián)頁面多級跳轉(zhuǎn)（頁面下鉆）功能的完整實例
這篇文章主要給大家介紹了關(guān)于Vue實現(xiàn)關(guān)聯(lián)頁面多級跳轉(zhuǎn)（頁面下鉆）功能的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-03-03
vue如何實現(xiàn)observer和watcher源碼解析
這篇文章主要為大家詳細介紹了vue如何實現(xiàn)observer和watcher源碼的相關(guān)資料，分析vue的observe實現(xiàn)源碼，聊聊如何一步一步實現(xiàn)$watch，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
Vue?echarts實例項目地區(qū)銷量趨勢堆疊折線圖實現(xiàn)詳解
Echarts，它是一個與框架無關(guān)的 JS 圖表庫，但是它基于Js，這樣很多框架都能使用它，例如Vue，估計IONIC也能用，因為我的習慣，每次新嘗試做一個功能的時候，總要新創(chuàng)建個小項目，做做Demo2022-09-09
props 主要用于父組件向子組件通信,再父組件中通過使用:msg='msg'綁定需要傳給子組件的屬性值,然后再在子組件中用props接收該屬性值,這篇文章主要介紹了vue3的組件通信&v-model使用,需要的朋友可以參考下2024-05-05
vue3+js+elementPlus使用富文本編輯器@vueup/vue-quill詳細教程
富文本編輯器在任何項目中都會用到,下面這篇文章主要給大家介紹了關(guān)于vue3+js+elementPlus使用富文本編輯器@vueup/vue-quill的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了Vue監(jiān)聽器簡單使用及注意事項說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08