web前端Vue報(bào)錯(cuò):Uncaught?(in?promise)?TypeError:Cannot?read?properties?of?nu解決
前言
最近在寫vue項(xiàng)目 在寫自定義分頁(yè)器的時(shí)候報(bào)了一個(gè)異常 知道錯(cuò)誤卻一直找不到解決方案
苦思冥想后 還是js的基礎(chǔ)語(yǔ)法不扎實(shí)導(dǎo)致的，在此記錄一下解決方案和思路
為以后的bug解決之路打下基礎(chǔ)
錯(cuò)誤提示
錯(cuò)誤內(nèi)容Uncaught (in promise) TypeError: Cannot read properties of null (reading 'length')
錯(cuò)誤截圖如下：
BUG分析
此bug大概是說我寫的一句語(yǔ)法，它沒有找到length這個(gè)方法
我們都知道java中只有集合和數(shù)組才有size和length這種方法
在vue語(yǔ)法中也同樣支持?jǐn)?shù)組語(yǔ)法，既然它說找不到那就是，這不是一個(gè)數(shù)字結(jié)構(gòu)！
下面是我代碼中的源代碼
<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這句三目表達(dá)式上
item.disease可能不是一個(gè)數(shù)組，比如item.disease這個(gè)對(duì)象為空
這樣一來item.disease就沒有.length這個(gè)方法了…
BUG解決
根據(jù)上述的分析，我們可以多加一層判斷
先判空再寫三目表達(dá)式，語(yǔ)法我們改為下面這樣子 先判空 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>
如此這個(gè)分頁(yè)器就完成了 沒bug了~
總結(jié)
到此這篇關(guān)于web前端Vue報(bào)錯(cuò):Uncaught (in promise) TypeError:Cannot read properties of nu解決的文章就介紹到這了,更多相關(guān)Vue報(bào)錯(cuò):Uncaught (in promise) TypeError內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- Vue報(bào)錯(cuò):TypeError:?Cannot?create?property?‘xxxx‘?on的解決
- vue?watch報(bào)錯(cuò):Error?in?callback?for?watcher?"xxx":"TypeError的解決方法
- 完美解決vue中報(bào)錯(cuò)?“TypeError:?Cannot?read?properties?of?null?(reading'forEach')“
- vue引入elementUi后打開頁(yè)面報(bào)錯(cuò)Uncaught?TypeError的解決方式
- Vue報(bào)錯(cuò):TypeError:Cannot create property 'xxx' on string 'xxxx'問題
相關(guān)文章
這篇文章主要給大家分享了 vue中install方法介紹，vue提供install可供我們開發(fā)新的插件及全局注冊(cè)組件等，感興趣的小伙伴請(qǐng)和小編一起進(jìn)入文章了解具體內(nèi)容吧2021-11-11
簡(jiǎn)單學(xué)習(xí)vue指令directive
這篇文章主要和大家一起簡(jiǎn)單學(xué)習(xí)一下vue指令：directive，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
Vue實(shí)現(xiàn)大屏頁(yè)面的屏幕自適應(yīng)
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)大屏頁(yè)面的屏幕自適應(yīng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
vue初嘗試--項(xiàng)目結(jié)構(gòu)(推薦)
這篇文章主要介紹了vue初嘗試--項(xiàng)目結(jié)構(gòu)的相關(guān)知識(shí),需要的朋友可以參考下2018-01-01
這篇文章主要介紹了Vue實(shí)現(xiàn)微信支付功能遇到的坑,本文是小編記錄整理下拉的，以便日后所需，需要的朋友可以參考下2019-06-06
mpvue跳轉(zhuǎn)頁(yè)面及注意事項(xiàng)
這篇文章主要介紹了mpvue跳轉(zhuǎn)頁(yè)面及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下2018-08-08
vue使用原生js創(chuàng)建元素樣式不生效問題及解決
這篇文章主要介紹了vue使用原生js創(chuàng)建元素樣式不生效問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue+Element-ui實(shí)現(xiàn)分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了vue+Element-ui實(shí)現(xiàn)分頁(yè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
vue項(xiàng)目?jī)?nèi)存溢出問題及解決方案
這篇文章主要介紹了vue項(xiàng)目?jī)?nèi)存溢出問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue項(xiàng)目如何部署到Tomcat服務(wù)器上
這篇文章主要介紹了Vue項(xiàng)目如何部署到Tomcat服務(wù)器上,Vue中自帶webpack,可以通過一行命令將項(xiàng)目打包,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03