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的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了vue3+vite动态加载路由,本地路由和线上路由匹配方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了vue 设置proxyTable参数进行代理跨域的相关资料，及代理跨域的概念原理,需要的朋友可以参考下2018-04-04
Vue + better-scroll 实现移动端字母索引导航功能
better-scroll 是一款重点解决移动端（已支持 PC）各种滚动场景需求的插件。这篇文章主要介绍了Vue + better-scroll 实现移动端字母索引导航功能,需要的朋友可以参考下2018-05-05
这篇文章主要为大家详细介绍了vue如何使用mpegts.js实现播放flv的直播视频流,文中的示例代码讲解详细,有需要的小伙伴可以参考一下2024-01-01
这篇文章主要为大家详细介绍了vue.js路由跳转的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
这篇文章主要介绍了移动端Vue2.x Picker的全局调用实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
这篇文章主要给大家介绍了关于vue中事件绑定的相关资料,事件绑定在Web开发中非常常见,我们经常需要在页面中为某个DOM元素绑定事件,如点击、鼠标移动、键盘敲击等等,需要的朋友可以参考下2023-09-09
使用v-on:click给button绑定监听事件以及回调函数，@是v-on:的缩写，也就是简写也可以使用@click，这篇文章主要介绍了Vue中v-on的基础用法、参数传递和修饰符,需要的朋友可以参考下2022-08-08
前几天朋友在做vue项目开发时，有人反映 IOS 上面的滑动点击有点问题，让我们来帮忙解决，于是我就重写了代码，下面把vue仿qq左滑删除组件功能分享到脚本之家平台，需要的朋友参考下吧2018-03-03
最新评论