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进数组的问题，要注意浅拷贝