vue中forEach循环的使用讲解

 更新时间:2022年06月13日 14:47:08   作者:huayang183  
这篇文章主要介绍了vue中forEach循环的使用,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

forEach循环的使用

//data为集合 
data.forEach(function(item, index) {
            //item 就是当日按循环到的对象
            //index是循环的索引,从0开始
})

使用forEach报错,this指向问题

getCrumbs(){
    let crumbs = JSON.parse(localStorage.getItem( "crumbs" )); 
    //[Vue warn]: Error in created hook: "TypeError: Cannot set property 'manageClass' of undefined" 报错
    crumbs.forEach(function(item){           
        console.log(item);                    
        if (item.name === "staffInfo") {
            this.manageClass = item.manageClass
            this.infoClass = item.infoClass; 
        }
    })
    
},    
crumbs.forEach(item => {
    console.log(item);                    
    if (item.name === "staffInfo") {
        this.manageClass = item.manageClass
        this.infoClass = item.infoClass; 
    }
})

每一个用function声明的函数在调用时都会在函数内创建自己的this。this一般是函数所操作的对象。如果没有操作的对象。this在"use strict";严格模式下是 undefined,非严格模式下是 window。
也就是说,function声明的函数总是有自己的this。从而遮盖外层作用域中的this。

如果用es6的箭头函数()=>{}就没有自己的this。在箭头函数()=>{}中访问this,是访问外层作用域中的this

 getCrumbs(){
    let crumbs = JSON.parse(localStorage.getItem( "crumbs" )); 
    //[Vue warn]: Error in created hook: "TypeError: Cannot set property 'manageClass' of undefined" 报错
    // crumbs.forEach(function(item){
    crumbs.forEach(item => {
        console.log(item);                    
        if (item.name === "staffInfo") {
            this.manageClass = item.manageClass
            this.infoClass = item.infoClass; 
        }
    })
    //  或者使用for循环
    for (let i = 0; i < crumbs.length; i++) {
        if (crumbs[i].name === "staffInfo") {
            this.manageClass = crumbs[i].manageClass
            this.infoClass = crumbs[i].infoClass; 
        }                  
    }
},  

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue3中ref与toRef的区别浅析

    Vue3中ref与toRef的区别浅析

    我们知道ref可以用于创建一个响应式数据,而toRef也可以创建一个响应式数据,这篇文章主要给大家介绍了关于Vue3中ref与toRef区别的相关资料,需要的朋友可以参考下
    2021-06-06
  • Vue2.0+Vux搭建一个完整的移动webApp项目的示例

    Vue2.0+Vux搭建一个完整的移动webApp项目的示例

    这篇文章主要介绍了Vue2.0+Vux搭建一个完整的移动webApp项目的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-03-03
  • Vue+Echarts实现绘制动态折线图

    Vue+Echarts实现绘制动态折线图

    这篇文章主要为大家详细介绍了如何利用Vue和Echarts实现绘制动态折线图,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-03-03
  • 关于vue中路由的跳转和参数传递,参数获取

    关于vue中路由的跳转和参数传递,参数获取

    这篇文章主要介绍了关于vue中路由的跳转和参数传递,参数获取方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • vuex中数据持久化插件vuex-persistedstate使用详解

    vuex中数据持久化插件vuex-persistedstate使用详解

    这篇文章主要介绍了vuex中数据持久化插件vuex-persistedstate使用详解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-03-03
  • vue自定义一个v-model的实现代码

    vue自定义一个v-model的实现代码

    这篇文章主要介绍了vue自定义一个v-model的实现代码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-06-06
  • vue实现打包添加二级目录

    vue实现打包添加二级目录

    这篇文章主要介绍了vue实现打包添加二级目录方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • Vue.js+express利用切片实现大文件断点续传

    Vue.js+express利用切片实现大文件断点续传

    断点续传就是要从文件已经下载的地方开始继续下载,本文主要介绍了Vue.js+express利用切片实现大文件断点续传,具有一定的参考价值,感兴趣的可以了解下
    2023-05-05
  • 最全vue的vue-amap使用高德地图插件画多边形范围的示例代码

    最全vue的vue-amap使用高德地图插件画多边形范围的示例代码

    这篇文章主要介绍了最全vue的vue-amap使用高德地图插件画多边形范围,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-07-07
  • 一文带你吃透Vue3编译原理

    一文带你吃透Vue3编译原理

    一直对编译原理的东西都有一种恐惧感,感觉太难了,看不懂,打开vue3源码看到编译相关的代码,直接吓退。不要担心,小编今天带你一文吃透Vue3编译原理
    2023-02-02

最新评论