使用v-for双层循环数据时,第二层数组不显示数据
vue里面循环数据一般使用v-for命令,但是循环一层的时候没啥问题,数据可以正常显示出来,但是循环两层时,有时候第二层数组里面的数据不显示,然后去百度了下,发现有兄弟也碰到了这种情况,并且给出了解决的办法,推荐使用 this.$forceUpdate() 这是vue里面的强制更新数据的方法,效果非常好,嘿嘿其实moldslist(第二层数组)这个字段,是我在本地新加的字段,也就是说,不是接口返回
一、显示第二层数组
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)
}
更多推荐
所有评论(0)