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

最新推荐文章于 2023-09-04 19:31:42 发布
最新推荐文章于 2023-09-04 19:31:42 发布
阅读量1.3k 收藏
点赞数
分类专栏： WEBPACK/VUECLI3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TLROJE787/article/details/100133668
版权

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

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

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

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

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

TLROJE777
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
push数组元素不渲染 vue_对vue中data的数组push无效
weixin_28958485的博客
01-28 3813
data (){return {keys: []}},methods: {select (key) {this.keys.push(key)console.log(this.keys)}}但是在控制台打印发现,并没有直接push,后面添加的将前面添加的覆盖了而且在vue-detools中查看keys为空请问这个是什么原因{{types.keyname}}type="radio":default-i...
使用v-for指令渲染界面，数组数据更新后不渲染新数据问题
weixin_43512524的博客
08-27 2962
初学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 解决数组赋值无法渲染在页面的问题
12-13
在做一个网页重构成VUE的时候，有段代码是这样的 一直能打印出pics的值，但是就是无法渲染出来，检查了不是视图那边是错，最后发现其中有两处错误，一处是this指向问题，此地打印出来的this.pics并不是data里面的pics的值，后面把success函数改成箭头函数即可，还有vue中数组赋值数组不能直接赋值。 可以用push方法，下面是修改后的代码 以上这篇vue 解决数组赋值无法渲染在页面的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。
js的unshift()
qq_42331499的博客
01-29 1467
js的unshift() 可以将参数添加到数组的第一位； &lt;script&gt; var a = ["乔布斯", "盖茨", "扎克伯格", "apple", "Ms", "facebook"]; document.write(a + "&lt;br&gt;"); a.unshift("李纳斯");
Vue渲染失败的几种原因和解决方法
rain_tsubasa的博客
06-14 8845
在进行数据双向绑定中，常遇到当数据变了，页面却没有同步渲染的情况。 首先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开发过程中，修改了数据，但是页面死活不渲染改变！没变化！怎么办？6种方法解决~
热门推荐
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
07-05 1万+
通常是某个渲染的数组改变了层级较深的数据导致页面没有实时渲染就这么写 this.items=JSON.parse(JSON.stringify(this.items));
Vue数据不渲染问题
weixin_34218579的博客
01-25 3462
使用vue开发项目的时候，几乎都会遇到一个问题，数据改变了，但是页面没有渲染。这种情况下一般都是数组和json才会发生。 在初始化的时候，如果是一个数组，使用push方法进行赋值，数据改变了，页面不会重新渲染，因为数组push的时候没有触发render函数。这时候可以使用中间数组的形式进行赋值，就是直接this.list = data，或者是直接使用vue提供的set方法。 在局部改变摸个json...
Vue中数组的列表渲染（v-for渲染数组，数组改变，页面不渲染问题）
Azbtt的博客
02-02 6689
Vue中数组的列表渲染；基本的列表（v-for的基本使用）；key的原理；v-for渲染数组，数组改变，页面不渲染问题
push数组元素不渲染 vue_【报Bug】往数组中 push 元素视图不更新
weixin_34227128的博客
01-17 2650
详细问题描述(DCloud产品不会有明显的bug，所以你遇到的问题大都是在特定环境下才能重现的问题，请仔细描述你的环境和重现方式，否则DCloud很难排查解决你的问题)[内容]往数组中 push 元素视图不更新重现步骤[步骤]如果直接往数组里面push元素，视图不会更新，上代码：.main.test {{arr}}button(@tap='push') 添加元素export default {da...
Vue中 数据改变但未渲染的问题，页面中并没有自动更新，但是在控制台可以打印出来，常见解决方法
liumimi973的博客
02-03 8691
打印出来值，赋值未渲染
【深入vue】为什么Vue3.0不再使用defineProperty实现数据监听？
yuqing1008的博客
10-12 463
点击蓝字 「前端小苑」关注我导 读vue3.0中，响应式数据部分弃用了Object.defineProperty，使用Proxy来代替它。本文将主要通过以下方面来分析为什么vue选择弃用...
vue---vis.js动态加载图谱之unshift踩坑记
maidu_xbd的博客
06-26 1623
问题描述：用vue做一个类似于如下图的neo4j的图谱管理系统，当每一次点击左侧标签时，往右侧搜索框下的顶部位置插入一个图。 解决方案：图谱数据通过数据驱动【<divclass="graph"v-for="(item,index)ingraphData":key="item.index">...</div>】 当每一次点击左侧标签时，往右侧搜索框下的顶部位置插入一个图,即在graphData中顶部插入一条数据【this.graphData.unshift(dat...
Vue中出现最多的“undefined”错误，检查原因以及解决办法（亲测有效）
最新发布
m0_70545163的博客
09-04 1万+
摘要：本文主要来讲讲vue中出现最多的"undefined"错误。
Vue 踩过的坑
a31401322的博客
12-26 150
VUE踩过的坑儿们数组中哪写方法是响应式的pop，shift，unshift，push，sort，reverse合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowch...
js数组的sort排序不准确
~
04-20 1221
在我们的印象里，arr.sort()方法会按升序排列数组元素 有次在处理数据时，发现使用sort排序后的数据不对 原因是：sort()方法会在每一项上调用String()转型函数，然后比较字符串来决定顺序。即时数组中的元素都是数值，也会先把数组转换为字符串再进行比较； 所以，因该也就理解了为什么 数字2排在数字10的后面 那我们该如何使用sort对数组排序才能正确呢？ 升序： arr.sort((a, b) => a - b) 降序： arr.sort((a, b) =>
小伙伴因 unshift 插入数据被批，未曾想到找我诉苦竟梅开二度
军火库
12-13 327
为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）
Vue中数组操作可能会出现的问题
qq_39807853的博客
08-26 1169
Vue中操作数组数据错乱或者页面不响应
jquery中push()的用法(数组添加元素)
weixin_30625691的博客
04-14 2631
push定义和用法 push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。 语法 arrayObject.push(newelement1,newelement2,....,newelementX) 参数 描述 newelement1 必需。要添加到数组的第一个元素。 newelement2 可选。要添加到数组的第二个元素。 newelementX 可选。可添加多个元素。 ...
vue高阶函数使用例子与常用数组响应式操作 filter,map,reduce
qq_49278774的博客
01-14 491
数组的响应式操作 1. this.array.push('在数组末尾添加一个元素') 2. this.array.pop()//'在数组末尾删除一个元素' 3. this.array.unshift('在数组的开始添加一个元素') 4. this.array.shift()//'在数组的结尾删除一个元素' 5. this.array.slice(1,2)//'在数组的下标为1的元素开始删除两个元素' 6. this.array.slice(1,2,'123','456')//'在数组的下标为1的
vue中数组push页面不刷新
08-08
在Vue中，当数组进行push操作时，页面不会自动刷新的原因是Vue采用的是响应式渲染机制。 Vue的响应式渲染是基于Vue的虚拟DOM机制实现的。当数据发生改变时，Vue会检测到这个改变，并通过比较虚拟DOM的前后状态，找...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值