vue中for循環(huán)作用域問題處理方式
最近在一個需求開發(fā)中，遇到作用域問題導(dǎo)致了瘋狂報錯，需求是需要在一個數(shù)組中找到typeName為生活權(quán)益N選1的對象，將其中resourceList中所有對象的expenseId拼接起來作為入?yún)⑦M(jìn)行接口調(diào)用，如果調(diào)用返回成功則設(shè)置該對象的isReceive為0
rightsList列表格式：
"rightsList": [
{
"typeName": "互聯(lián)網(wǎng)權(quán)益N選1",
"isReceive": '1',
"resourceList": [
{
"expenseId": "ZY",
},
{
"expenseId": "ZY",
}
]
},
{
"typeName": "生活權(quán)益N選1",
"isReceive": '1',
"resourceList": [
{
"expenseId": "ZY",
},
{
"expenseId": "ZY",
}
]
}
]
這里由于需要遍歷查找typeName，并為當(dāng)前對象的isReceive賦值，所有將接口調(diào)用寫在了for循環(huán)中，當(dāng)接口調(diào)用成功將值賦給了this.rightList[i],但運(yùn)行后一直報錯沒有isReceive的屬性
問題
由于這里使用的var初始化i變量，并沒有塊作用域，使用for循環(huán)進(jìn)行i的遞增，而接口回調(diào)是異步操作，當(dāng)接口調(diào)用完成后對this.rightList[i]進(jìn)行賦值時，i的值已經(jīng)遞增到了this.rightList.length,所以取不到isReceive屬性
解決
1.不在循環(huán)中執(zhí)行接口調(diào)用
循環(huán)查出typeName為“生活權(quán)益N選1”的下標(biāo)值，在接口調(diào)用完成后直接賦值（已實(shí)踐）
2.不使用var
使用let關(guān)鍵字，let作為es6的方法有塊作用域
總結(jié)
以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue?中ref()和?reactive()響應(yīng)式數(shù)據(jù)的使用方法
article介紹Vue3中ref()和reactive()函數(shù)的使用方法,ref()用于創(chuàng)建基本數(shù)據(jù)類型的響應(yīng)式引用,reactive()用于創(chuàng)建響應(yīng)式對象,本文介紹Vue中ref()和reactive()響應(yīng)式數(shù)據(jù)的使用方法,感興趣的朋友一起看看吧2025-01-01
這篇文章主要介紹了Vue中el-table條件渲染防止樣式亂掉問題,通過使用:key="Math.random()" 可解決樣式錯亂問題,此key屬性是vue自帶的特殊屬性,主要用在 Vue 的虛擬 DOM 算法,在新舊 nodes 對比時辨識 VNodes,依次來提升頁面渲染性能,感興趣的朋友一起看看吧2023-11-11
淺談mvvm-simple雙向綁定簡單實(shí)現(xiàn)
本篇文章主要介紹了淺談mvvm-simple雙向綁定簡單實(shí)現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
docxtemplater?是一種郵件合并工具,以編程方式使用并處理?xiàng)l件、循環(huán),并且可以擴(kuò)展以插入任何內(nèi)容,下面我們來看看如何使用docxtemplater導(dǎo)出word吧2025-04-04
今天小編就為大家分享一篇vue h5移動端禁止縮放代碼，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
vue點(diǎn)擊標(biāo)簽切換選中及互相排斥操作
這篇文章主要介紹了vue點(diǎn)擊標(biāo)簽切換選中及互相排斥操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue 的 solt 子組件過濾過程解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-09-09
這篇文章主要介紹了Vue中的ref,props,mixin屬性,文章圍繞主題ref,props,mixin展開詳細(xì)內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-05-05
這篇文章主要為大家介紹了vue3.x:報錯清單及解決記錄詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07
本文主要介紹了vue2實(shí)現(xiàn)傳送門效果的示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04