web前端Vue報錯:Uncaught?(in?promise)?TypeError:Cannot?read?properties?of?nu解決
前言
最近在寫vue項目 在寫自定義分頁器的時候報了一個異常 知道錯誤卻一直找不到解決方案
苦思冥想后 還是js的基礎語法不扎實導致的,在此記錄一下解決方案和思路
為以后的bug解決之路打下基礎
錯誤提示
錯誤內容Uncaught (in promise) TypeError: Cannot read properties of null (reading 'length')
錯誤截圖如下:
BUG分析
此bug大概是說我寫的一句語法,它沒有找到length
這個方法
我們都知道java
中只有集合和數(shù)組才有size和length
這種方法
在vue語法中也同樣支持數(shù)組語法,既然它說找不到那就是,這不是一個數(shù)字結構!
下面是我代碼中的源代碼
<div v-if="item.disease.length > 4 ? true:false"> <a style="pointer-events: none; color: #C8DBF2;" @click="addDisease(item,index)">+添加癥狀</a> </div>
問題就出在item.disease.length > 4 ? true:false
這句三目表達式上
item.disease
可能不是一個數(shù)組,比如item.disease這個對象為空
這樣一來item.disease
就沒有.length
這個方法了…
BUG解決
根據(jù)上述的分析,我們可以多加一層判斷
先判空再寫三目表達式,語法我們改為下面這樣子 先判空 item.disease!=null
<div v-if="item.disease!=null && item.disease.length > 4 ? true:false"> <a style="pointer-events: none; color: #C8DBF2;" @click="addDisease(item,index)">+添加癥狀</a>
如此這個分頁器就完成了 沒bug了~
總結
到此這篇關于web前端Vue報錯:Uncaught (in promise) TypeError:Cannot read properties of nu解決的文章就介紹到這了,更多相關Vue報錯:Uncaught (in promise) TypeError內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
解決Vue路由導航報錯:NavigationDuplicated:?Avoided?redundant?navig
這篇文章主要給大家介紹了關于解決Vue路由導航報錯:NavigationDuplicated:?Avoided?redundant?navigation?to?current?location的相關資料,這是最近做項目時候遇到的一個問題,現(xiàn)將解決辦法分享出來,需要的朋友可以參考下2023-01-01van-dialog彈窗異步關閉功能-校驗表單實現(xiàn)
有時候我們需要通過彈窗去處理表單數(shù)據(jù),在原生微信小程序配合vant組件中有多種方式實現(xiàn),其中UI美觀度最高的就是通過van-dialog嵌套表單實現(xiàn),這篇文章主要介紹了van-dialog彈窗異步關閉-校驗表單,需要的朋友可以參考下2023-11-11關于在vue 中使用百度ueEditor編輯器的方法實例代碼
這篇文章主要介紹了在vue 中使用百度ueEditor編輯器的方法實例代碼 ,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09