vue中for循环作用域问题处理方式
更新时间：2023年11月18日 08:41:20 作者：钥零零
这篇文章主要介绍了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 中ref()和 reactive()响应式数据的使用方法
article介绍Vue3中ref()和reactive()函数的使用方法,ref()用于创建基本数据类型的响应式引用,reactive()用于创建响应式对象,本文介绍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 是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用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
最新评论