Vue中数组push问题

2024-06-20 12:59:01

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

Vue中数组push问题相关推荐

Vue中数组变动监听
Vue中数组变动监听 Vue的通过数据劫持的方式实现数据的双向绑定,即使用Object.defineProperty()来实现对属性的劫持,但是Object.defineProperty()中的set ...
vue中数组的七个响应式方法
vue中数组的七个响应式方法起因: 在使用vue实习中,通过数组的索引改变了数组中的值,测试时发现,更改成功了,但是试图无响应. 原因: *通过索引值修改数组元素,不是响应式方法* // 以下代 ...
vue中$router.push打开新窗口
vue中$router.push打开一个新窗口 this.$router.push("/CustomView/systemManage/CustomView"); //跳转// 默 ...
Vue中数组赋值问题
出现的问题昨天工作内遇到的问题,用输入arrList渲染了一个表格,修改了arrList,然而列表没有改变. Vue 不是双向绑定吗?怎么回事?what's fuck 值变了? 列表没有变??? 测 ...
VUE中数组赋值push与=的区别
最近做项目时(vue2.0)遇到此坑耗费不少时间,分享如下: data中定义初始结构: data:function(){ return { optionsArr: [{name ...
vue中数组长度_如何在Vue.js中获取计算数组的长度
我使用的是一个计算方法,它检查用户是否单击了搜索输入,然后检查JSON文件,以将用户的查询与JSON文件中的字符串匹配.这是我当前的代码: computed: { filteredPrizesByQu ...
Vue 中数组常用方法的使用和示例
文章目录 Find 查找数组元素 map取数组对象中的某一字段组成新数组 join数组转化为字符串,并用顿号隔开 filter对数组进行过滤 Find 查找数组元素 Find 用来遍历查找数组元素,当 ...
Vue中数组更新，达到更新数组的几种方法
最近面试问道和平时工作中用到:改变了数组内的值,但是页面没有重新渲染,今天记录下解决方法直接修改不生效,代码如下 <template><div><h2>数组展示: ...
vue中数组长度_vue.js - 如何获得动态数组的数组长度 - SO中文参考 - www.soinside.com...
您知道从API加载所有包含的数据后如何获取数字行问题数组.我需要为分页表设置totalRows,但是this.questions = this.questions.lenght 无效,返回null.e ...

最新文章

热门文章