Vue中数组push问题

最近在Vue框架中使用数组push遇到两个坑

1. 向数组中push后,无法获取到数组中的属性值

数组赋值:

......
res.data.forEach((item,index) => { // res.data中有值
  this.bData.push({
  ......
    video: item.video
  })
})
......

页面取值:

<video :url="bData[0].video"></video>

页面中无法获取到bData[0].video,后通过console打印bData中各项的video值,发现bData[0].video确实为undefined,而bData[1].video中却是正常取到值的。。。

2.vue-seamless-scroll 无法滚动

一开始以为是vue-seamless-scroll插件使用不当,但是经过对比后,发现其余位置均可正常无缝滚动。经过查阅相关资料,发现还是push带来的问题。。。

vue-seamless-scroll插件使用:

<vue-seamless-scroll
  :data="bData"
  :class-option="optionSingleHeightTime"
  class="seamless-warp-two"
>
......
</vue-seamless-scroll>

bData的赋值代码同上面1.中的数组赋值

vue-seamless-scroll的配置项optionSingleHeightTime中,设置了大于3条记录无缝滚动,但是当bData中有4条数据时,页面只显示固定的3条数据,不滚动。

解决方法:

vue中循环数组push时候是一个对象,导致和想要的不一致,可能会出现问题。

方法1:避免bData.push的依次添加数据的操作
i.重新申请一个内存空间 let tempData = []
ii.依次向tempData中赋值

tempData.push({
	......
  video: item.video
})

iii.最后一次性将临时存储数据的数组tempData赋值bData

this.bData = tempData

这样问题1和2都顺利解决啦~

方法2:用json进行转换
看到有博文说用json转一圈就换了新对象,就可以解决问题,但还未尝试过。

附上参考链接:
vue-seamless-scroll插件滚动问题

push问题:
vue的for循环数组push的坑

Vue中遇到一条对象{}push进数组的问题,要注意浅拷贝

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值