[VUE]关于数组push，pop，unshift，shift后页面渲染数组展示索引的错误解决

最新推荐文章于 2023-03-29 17:59:56 发布
最新推荐文章于 2023-03-29 17:59:56 发布
阅读量1.3k 收藏
点赞数
分类专栏： WEBPACK/VUECLI3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/TLROJE787/article/details/100133668
版权
本文深入探讨了JavaScript中数组方法的常见误区，特别是关于this.array=this.array.push('something')的使用，解释了为何push方法无需赋值即可改变原数组，并回顾了不返回新数组的数组方法，帮助读者巩固基础知识。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这个问题的触发场景是这样的

this.array = this.array.push('something');

后来查阅发现push等方法返回数组的长度
操作数组不需要赋值，因为是直接改变原数组

这个this.array其实是13,v-for应该是循环了1到13的数字

反思:对不返回新数组的数组方法加以复习

小伙伴因 unshift 插入数据被批，未曾想到找我诉苦竟梅开二度
军火库
12-13 363
为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）
数组循环后页面没有渲染_解决vue数组中对象属性变化页面不渲染问题
weixin_39683241的博客
12-19 940
做checkbox多选功能的时候遇到了一个坑，逻辑怎么看都对，但是就是有bug，最后发现数组那里值变了页面勾选没有重新渲染。换了关键词搜索找到了相关方法。其实之前读文档教程的时候看到过这里，但是只有真的使用之后才会有最直接的感触。数组更新检测变异方法Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：push()pop()shift()unshift()splice()s...
vue---vis.js动态加载图谱之unshift踩坑记
maidu_xbd的博客
06-26 1746
问题描述：用vue做一个类似于如下图的neo4j的图谱管理系统，当每一次点击左侧标签时，往右侧搜索框下的顶部位置插入一个图。 解决方案：图谱数据通过数据驱动【<divclass="graph"v-for="(item,index)ingraphData":key="item.index">...</div>】 当每一次点击左侧标签时，往右侧搜索框下的顶部位置插入一个图,即在graphData中顶部插入一条数据【this.graphData.unshift(dat...
H5、微信小程序 push、unshift 使用报错
板砖工KO水泥匠
06-01 840
H5、微信小程序 push、unshift 使用报错 js var once_time = null var fast_index = 0 Page({ data: { history:"", history_array:[], keywords: ['AAAAAA', 'BBBBBB', 'CCCCCC', 'DDDDDD', 'EEEEEE', 'FFFFFF', 'GGGGGG',], currentIndex:0, }, // 清除历史 clearHi
vue-遇到的问题
alpha_xu_vvvvv的博客
01-10 436
vue数组响应式检测不到的情况 css—opacity的继承问题 opacity属性会被子元素继承 那么如果你要背景opacity 0.5 半透明 那么这个标签上的文字也会被设置为opacity 0.5 继承了， 解决办法：1.使用rgba 兼容问题–不兼容低级浏览器ie 2. 使子元素不是子元素 用绝对定位把应该的子元素 设置到对应的位置 即 就是不要是设置是opacity属性的标签的子标签就好了。 ...
解决 vue 修改 props 数据报错的问题
xiaowude_boke的博客
03-29 2313
因为 props 的优先级要高于 data 所以我们能在 data 中使用 props 中的数据 需要注意 data 中的数据名不要和 props 中的数据名一样 否则会报错呀..
vue 解决数组赋值无法渲染在页面的问题
10-16
为了确保视图能够响应数组的更新，Vue提供了几种方法：`push()`, `pop()`, `shift()`, `unshift()`, `splice()`, `sort()` 和 `reverse()`。这些方法会直接修改数组并触发视图更新。因此，如果你需要向数组添加...
详解vue 数组和对象渲染问题
10-17
1. `push()`, `pop()`, `shift()`, `unshift()`: 这些方法会直接改变数组的长度，Vue可以检测到这些变化并更新视图。 2. `splice()`: 可以添加或删除数组元素，Vue同样能跟踪这些变化。 3. `sort()`, `reverse()`: ...
vue踩坑记录之数组定义和赋值问题
10-17
2. **使用数组方法**：可以使用`push`、`pop`、`shift`、`unshift`、`splice`、`sort`和`reverse`等数组原生方法，这些方法会触发数组的setter，Vue可以检测到变化。 3. **整体替换数组**：如果需要完全替换数组，...
vue 对象中数组中对象某个属性更改_vue数组中对象属性变化页面不渲染问题
weixin_39947351的博客
12-19 439
问题引入Vue之所以能够监听Model状态的变化，是因为JavaScript语言本身提供了Proxy或者Object.observe()机制来监听对象状态的变化。但是，对于数组元素的赋值，却没有办法直接监听。因此，如果我们直接对数组元素赋值{{item.name}}--{{item.age}}data(){return{arrInfo:[{'name':'zuobaiquan','age':22}...
浅析vue.js数组的变异方法
12-29
Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下： push() pop() shift() unshift() splice() sort() reverse() 都有什么功能？动手试验了一下： <body> <div id=app> <div> push方法： <input type=text v-model=text @keyup.enter=methodByPush> <input type=button value=测试功能 @click=methodByPush>
js数组的sort排序不准确
~
04-20 1362
在我们的印象里，arr.sort()方法会按升序排列数组元素 有次在处理数据时，发现使用sort排序后的数据不对 原因是：sort()方法会在每一项上调用String()转型函数，然后比较字符串来决定顺序。即时数组中的元素都是数值，也会先把数组转换为字符串再进行比较； 所以，因该也就理解了为什么 数字2排在数字10的后面 那我们该如何使用sort对数组排序才能正确呢？ 升序： arr.sort((a, b) => a - b) 降序： arr.sort((a, b) =>
js的unshift()
qq_42331499的博客
01-29 1510
js的unshift() 可以将参数添加到数组的第一位； &lt;script&gt; var a = ["乔布斯", "盖茨", "扎克伯格", "apple", "Ms", "facebook"]; document.write(a + "&lt;br&gt;"); a.unshift("李纳斯");
Vue渲染失败的几种原因和解决方法
rain_tsubasa的博客
06-14 9409
在进行数据双向绑定中，常遇到当数据变了，页面却没有同步渲染的情况。 首先Vue 的数据双向绑定原理 是分为 1.observe 2.deps 3.watcher 在observe中，会通过Object.keys()获取所有的属性push一个订阅器到 deps中， 1.假设template中，我在created的钩子函数中定义了this.a = 1,在btn中添加了事件改变this.a,此时观察到页面未渲染。 <template> <div>{{a}} .
Vue中 数据改变但未渲染的问题，页面中并没有自动更新，但是在控制台可以打印出来，常见解决方法
liumimi973的博客
02-03 9991
打印出来值，赋值未渲染
使用v-for指令渲染界面，数组数据更新后不渲染新数据问题
weixin_43512524的博客
08-27 3072
初学vue，只是想要假数据来模拟一下 目的：实现点击这个按钮就会在页面加载新数据 实现：直接在数组里,改变数组（push函数）来达到重新渲染页面的目的 1.页面v-for渲染代码 <div class="cmt-item" v-for="item in comList"：key> <div class="cmt-title"> {{ item.time }} </div> <div class="cmt-
Vue 踩过的坑
a31401322的博客
12-26 198
VUE踩过的坑儿们数组中哪写方法是响应式的pop，shift，unshift，push，sort，reverse合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowch...
Vue中数组操作可能会出现的问题
qq_39807853的博客
08-26 1316
Vue中操作数组数据错乱或者页面不响应
Vue对象数组绑定更新不渲染问题及解决方案
"Vue绑定对象与数组变量更改后无法渲染问题" 在JavaScript环境中，Vue框架在处理对象和数组的响应式更新时存在一些限制。在上述项目场景中，开发者遇到了一个问题，即当尝试动态修改对象内的数组数据时，Vue无法...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值