vue中for循环作用域问题处理方式
最近在一个需求开发中,遇到作用域问题导致了疯狂报错,需求是需要在一个数组中找到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循环中,当接口调用成功将值赋给了this.rightList[i],但运行后一直报错没有isReceive的属性
问题
由于这里使用的var初始化i变量,并没有块作用域,使用for循环进行i的递增,而接口回调是异步操作,当接口调用完成后对this.rightList[i]进行赋值时,i的值已经递增到了this.rightList.length,所以取不到isReceive属性
解决
1.不在循环中执行接口调用
循环查出typeName为“生活权益N选1”的下标值,在接口调用完成后直接赋值(已实践)
2.不使用var
使用let关键字,let作为es6的方法有块作用域
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue项目中使用lib-flexible解决移动端适配的问题解决
这篇文章主要介绍了vue项目中使用lib-flexible解决移动端适配的问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2018-08-08vue @click与@click.native,及vue事件机制的使用分析
这篇文章主要介绍了vue @click与@click.native,及vue事件机制的使用分析,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2022-04-04vue3-print-nb实现页面打印(含分页打印)示例代码
大多数后台系统中都存在打印的需求,在有打印需求时,对前端来说当然是直接打印页面更容易,下面这篇文章主要给大家介绍了关于vue3-print-nb实现页面打印(含分页打印)的相关资料,需要的朋友可以参考下2024-01-01基于Vue3+TypeScript的全局对象的注入和使用详解
这篇文章主要介绍了基于Vue3+TypeScript的全局对象的注入和使用,本篇随笔主要介绍一下基于Vue3+TypeScript的全局对象的注入和使用,需要的朋友可以参考下2022-09-09
最新评论