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