快捷導(dǎo)航

web前端Vue報(bào)錯(cuò):Uncaught?(in?promise)?TypeError:Cannot?read?properties?of?nu解決

更新時(shí)間：2023年01月29日 15:27:05 作者：呂氏春秋i

這篇文章主要給大家介紹了關(guān)于web前端Vue報(bào)錯(cuò):Uncaught?(in?promise)?TypeError:Cannot?read?properties?of?nu的解決方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

前言

最近在寫(xiě)vue項(xiàng)目在寫(xiě)自定義分頁(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ò)誤截圖如下：

errot

BUG分析

此bug大概是說(shuō)我寫(xiě)的一句語(yǔ)法，它沒(méi)有找到length這個(gè)方法

我們都知道java中只有集合和數(shù)組才有size和length這種方法

在vue語(yǔ)法中也同樣支持?jǐn)?shù)組語(yǔ)法，既然它說(shuō)找不到那就是，這不是一個(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>

問(wèn)題就出在item.disease.length > 4 ? true:false這句三目表達(dá)式上

item.disease可能不是一個(gè)數(shù)組，比如item.disease這個(gè)對(duì)象為空

這樣一來(lái)item.disease就沒(méi)有.length這個(gè)方法了…

BUG解決

根據(jù)上述的分析，我們可以多加一層判斷

先判空再寫(xiě)三目表達(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è)器就完成了沒(méi)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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue.js之vue-cli腳手架的搭建詳解
本篇文章主要介紹了vue.js之vue-cli腳手架的搭建詳解，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
Vue3動(dòng)態(tài)倒計(jì)時(shí)的代碼實(shí)現(xiàn)
在使用Vue框架開(kāi)發(fā)Web應(yīng)用時(shí),倒計(jì)時(shí)功能是一個(gè)常見(jiàn)的需求,它可以在一定時(shí)間內(nèi)重復(fù)執(zhí)行某些操作,比如防止用戶(hù)重復(fù)提交表單、限制投票次數(shù)、實(shí)現(xiàn)驗(yàn)證碼獲取等功能,所以本文給大家介紹了Vue3動(dòng)態(tài)倒計(jì)時(shí)的代碼實(shí)現(xiàn),需要的朋友可以參考下
2024-09-09
vue項(xiàng)目打包之后背景樣式丟失的解決方案
今天小編就為大家分享一篇關(guān)于vue項(xiàng)目打包之后背景樣式丟失的解決方案，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧
2019-01-01
解決Vue路由導(dǎo)航報(bào)錯(cuò):NavigationDuplicated:?Avoided?redundant?navig
這篇文章主要給大家介紹了關(guān)于解決Vue路由導(dǎo)航報(bào)錯(cuò):NavigationDuplicated:?Avoided?redundant?navigation?to?current?location的相關(guān)資料,這是最近做項(xiàng)目時(shí)候遇到的一個(gè)問(wèn)題,現(xiàn)將解決辦法分享出來(lái),需要的朋友可以參考下
2023-01-01
前端框架Vue.js構(gòu)建大型應(yīng)用淺析
這篇文章主要為大家詳細(xì)介紹了前端框架Vue.js構(gòu)建大型應(yīng)用的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
Vue中data數(shù)據(jù)初始化方法詳解
這篇文章主要介紹了Vue中data數(shù)據(jù)初始化方法，數(shù)據(jù)初始化是在組件實(shí)例化時(shí)發(fā)生的，在組件中，可以通過(guò)data選項(xiàng)來(lái)定義組件的初始數(shù)據(jù)，需要詳細(xì)了解可以參考下文
2023-05-05
vue源碼之批量異步更新策略的深入解析
這篇文章主要給大家介紹了關(guān)于vue源碼之批量異步更新策略的相關(guān)資料，關(guān)于vue異步更新是我們?nèi)粘ｉ_(kāi)發(fā)中經(jīng)常遇到的一個(gè)功能，需要的朋友可以參考下
2021-05-05
van-dialog彈窗異步關(guān)閉功能-校驗(yàn)表單實(shí)現(xiàn)
有時(shí)候我們需要通過(guò)彈窗去處理表單數(shù)據(jù)，在原生微信小程序配合vant組件中有多種方式實(shí)現(xiàn)，其中UI美觀度最高的就是通過(guò)van-dialog嵌套表單實(shí)現(xiàn)，這篇文章主要介紹了van-dialog彈窗異步關(guān)閉-校驗(yàn)表單,需要的朋友可以參考下
2023-11-11
關(guān)于在vue 中使用百度ueEditor編輯器的方法實(shí)例代碼
這篇文章主要介紹了在vue 中使用百度ueEditor編輯器的方法實(shí)例代碼 ,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-09-09
VUE開(kāi)發(fā)一個(gè)圖片輪播的組件示例代碼
本篇文章主要介紹了VUE開(kāi)發(fā)一個(gè)圖片輪播的組件示例代碼，對(duì)圖片輪播效果感興趣的小伙伴們可以參考一下。
2017-03-03