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;
}
}
}, 以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了vue中form表单禁用专用组件,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章主要介绍了vue如何自定义组件v-model问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
Vite是一个开发环境工具，旨在提高我们的开发速度,下面这篇文章主要给大家介绍了关于如何为老vue项目添加vite支持的相关资料,需要的朋友可以参考下2021-09-09
Vue中使用 setTimeout() setInterval()函数的问题
这篇文章主要介绍了Vue中使用 setTimeout() setInterval()函数的问题 ,需要的朋友可以参考下2018-09-09
这篇文章主要为大家详细介绍了vue实现图片预览组件封装与使用，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
Pinia不但支持Vue3，同时还支持Vue2，本文主要介绍了Vue新的状态管理库Pinia入门教程，具有一定的参考价值，感兴趣的可以了解下2022-02-02
vue路由history模式页面刷新404解决方法Koa Express
这篇文章主要为大家介绍了vue路由history模式页面刷新404解决方法（Koa Express）详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
本文主要介绍了VUE+ElementUI下载文件的几种方式(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
这篇文章主要介绍了Vue学习笔记进阶篇之vue-cli安装及介绍，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要为大家详细介绍了如何基于vue手动实现一个日历组件,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以跟随小编一起学习一下2024-01-01
最新评论