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],但運行后一直報錯沒有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)用完成后直接賦值（已實踐）
2.不使用var
使用let關(guān)鍵字，let作為es6的方法有塊作用域
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了關(guān)于單文件組件.vue的使用，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
vue3+vite動態(tài)加載路由,本地路由和線上路由匹配方式
這篇文章主要介紹了vue3+vite動態(tài)加載路由,本地路由和線上路由匹配方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
vue 設(shè)置proxyTable參數(shù)進(jìn)行代理跨域
這篇文章主要介紹了vue 設(shè)置proxyTable參數(shù)進(jìn)行代理跨域的相關(guān)資料，及代理跨域的概念原理,需要的朋友可以參考下2018-04-04
Vue + better-scroll 實現(xiàn)移動端字母索引導(dǎo)航功能
better-scroll 是一款重點解決移動端（已支持 PC）各種滾動場景需求的插件。這篇文章主要介紹了Vue + better-scroll 實現(xiàn)移動端字母索引導(dǎo)航功能,需要的朋友可以參考下2018-05-05
vue使用mpegts.js實現(xiàn)播放flv的直播視頻流
這篇文章主要為大家詳細(xì)介紹了vue如何使用mpegts.js實現(xiàn)播放flv的直播視頻流,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下2024-01-01
這篇文章主要為大家詳細(xì)介紹了vue.js路由跳轉(zhuǎn)的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
移動端Vue2.x Picker的全局調(diào)用實現(xiàn)
這篇文章主要介紹了移動端Vue2.x Picker的全局調(diào)用實現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要給大家介紹了關(guān)于vue中事件綁定的相關(guān)資料,事件綁定在Web開發(fā)中非常常見,我們經(jīng)常需要在頁面中為某個DOM元素綁定事件,如點擊、鼠標(biāo)移動、鍵盤敲擊等等,需要的朋友可以參考下2023-09-09
Vue中v-on的基礎(chǔ)用法、參數(shù)傳遞和修飾符的示例詳解
使用v-on:click給button綁定監(jiān)聽事件以及回調(diào)函數(shù)，@是v-on:的縮寫，也就是簡寫也可以使用@click，這篇文章主要介紹了Vue中v-on的基礎(chǔ)用法、參數(shù)傳遞和修飾符,需要的朋友可以參考下2022-08-08
前幾天朋友在做vue項目開發(fā)時，有人反映?IOS?上面的滑動點擊有點問題，讓我們來幫忙解決，于是我就重寫了代碼，下面把vue仿qq左滑刪除組件功能分享到腳本之家平臺，需要的朋友參考下吧2018-03-03