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进度条progressbar组件功能

    Vue进度条progressbar组件功能

    progressbar组件在一个可以直接运行的npm包,通过Yeoman进行构建,再通过Gulp+Webpack构建工具。这篇文章给大家介绍了Vue进度条progressbar组件
    2018-04-04
  • VUE+element-ui文件上传的示例代码

    VUE+element-ui文件上传的示例代码

    图片和文件上传在很多项目中都可以使用的到,本文主要介绍了VUE+element-ui文件上传的示例代码,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue+antDesign实现树形数据展示及勾选联动

    vue+antDesign实现树形数据展示及勾选联动

    本文主要介绍了vue+antDesign实现树形数据展示及勾选联动,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • vue组件父与子通信详解(一)

    vue组件父与子通信详解(一)

    这篇文章主要为大家详细介绍了vue组件父与子通信详解,实现登录窗口,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-11-11
  • 详解如何使用vue实现页面访问拦截

    详解如何使用vue实现页面访问拦截

    这篇文章主要为大家详细介绍了如何使用vue实现页面访问拦截功能,文中的示例代码讲解详细,具有一定的参考价值,需要的可以了解一下
    2023-08-08
  • vue 使用 canvas 实现手写电子签名

    vue 使用 canvas 实现手写电子签名

    这篇文章主要介绍了vue 使用 canvas 实现手写电子签名功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • Vue中使用vee-validate表单验证的方法

    Vue中使用vee-validate表单验证的方法

    vee validate 一个轻量级的 vue表单验证插件。接下来通过本文给大家分享Vue中使用vee-validate表单验证的方法,需要的朋友参考下吧
    2018-05-05
  • 如何在vue3中同时使用tsx与setup语法糖

    如何在vue3中同时使用tsx与setup语法糖

    这篇文章主要介绍了如何在vue3中同时使用tsx与setup语法糖,文章围绕主题展开详细的内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-09-09
  • vue打包上传服务器加载提示错误Loading chunk {n} failed

    vue打包上传服务器加载提示错误Loading chunk {n} failed

    这篇文章主要为大家介绍了vue打包上传服务器加载提示错误Loading chunk {n} failed解决方法,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • vue+js点击箭头实现图片切换

    vue+js点击箭头实现图片切换

    这篇文章主要为大家详细介绍了vue+js点击箭头实现图片切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06

最新评论