一、显示第二层数组

vue里面循环数据一般使用v-for命令,但是循环一层的时候没啥问题,数据可以正常显示出来,但是循环两层时,有时候第二层数组里面的数据不显示,然后去百度了下,发现有兄弟也碰到了这种情况,并且给出了解决的办法,推荐使用 this.$forceUpdate() 这是vue里面的强制更新数据的方法,效果非常好,嘿嘿
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

二、for循环中,let和var的区别

其实moldslist(第二层数组)这个字段,是我在本地新加的字段,也就是说,不是接口返回的,
在这里插入图片描述
想要给每一条数据都加上这个字段,使用for循环呗,然后直接就var了,自然就报错了,系统提示我 TypeError: Cannot set properties of undefined (setting ‘moldslist‘)
然后首先觉得是不是this的指向问题呢,因为箭头函数是会改变this指向的,就 let that=this;,结果,还是提示我 TypeError: Cannot set properties of undefined (setting ‘moldslist‘)
然后我就打印this,打印i,
在这里插入图片描述

在这里插入图片描述
this是没问题的,打印出来的值是正确的,但是我发现i全是2,这就不对了,我的i只循环了2次,打印值也应该是0,1,这个2是什么鬼????

然后想到了以前的var和let的区别,比如说,要循环的数组的长度为5,let是有作用域的,for循环里面使用let定义下标,打印出来的下标会是0,1,2,3,4,for循环里面使用var定义下标,打印出来的下标只会是结束循环时的下标5,所以改用let,系统不提示我报错,数组也添加到每一条数据里面,问题解决!

使用 var 进行for循环

for(var i=0;i<5;i++){
	setTimeout(function(){
		console.log(i)
	},100)
}

使用 let 进行for循环

for(let i=0;i<5;i++){
	setTimeout(function(){
		console.log(i)
	},100)
}

在这里插入图片描述

Logo

前往低代码交流专区

更多推荐