web前端Vue報錯:Uncaught?(in?promise)?TypeError:Cannot?read?properties?of?nu解決
前言
最近在寫vue項目 在寫自定義分頁器的時候報了一個異常 知道錯誤卻一直找不到解決方案
苦思冥想后 還是js的基礎語法不扎實導致的，在此記錄一下解決方案和思路
為以后的bug解決之路打下基礎
錯誤提示
錯誤內(nèi)容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內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本篇文章主要介紹了vue.js之vue-cli腳手架的搭建詳解，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
在使用Vue框架開發(fā)Web應用時,倒計時功能是一個常見的需求,它可以在一定時間內(nèi)重復執(zhí)行某些操作,比如防止用戶重復提交表單、限制投票次數(shù)、實現(xiàn)驗證碼獲取等功能,所以本文給大家介紹了Vue3動態(tài)倒計時的代碼實現(xiàn),需要的朋友可以參考下2024-09-09
今天小編就為大家分享一篇關于vue項目打包之后背景樣式丟失的解決方案，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
解決Vue路由導航報錯:NavigationDuplicated:?Avoided?redundant?navig
這篇文章主要給大家介紹了關于解決Vue路由導航報錯:NavigationDuplicated:?Avoided?redundant?navigation?to?current?location的相關資料,這是最近做項目時候遇到的一個問題,現(xiàn)將解決辦法分享出來,需要的朋友可以參考下2023-01-01
這篇文章主要為大家詳細介紹了前端框架Vue.js構建大型應用的相關資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了Vue中data數(shù)據(jù)初始化方法，數(shù)據(jù)初始化是在組件實例化時發(fā)生的，在組件中，可以通過data選項來定義組件的初始數(shù)據(jù)，需要詳細了解可以參考下文2023-05-05
這篇文章主要給大家介紹了關于vue源碼之批量異步更新策略的相關資料，關于vue異步更新是我們?nèi)粘ｉ_發(fā)中經(jīng)常遇到的一個功能，需要的朋友可以參考下2021-05-05
van-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
本篇文章主要介紹了VUE開發(fā)一個圖片輪播的組件示例代碼，對圖片輪播效果感興趣的小伙伴們可以參考一下。2017-03-03