vue报错cannot read property_vue3 ref 数组

vue报错cannot read property_vue3 ref 数组当函数执行到this.agents.splice()时,我设置了断点。发现传参index是0,但是页面上的列表项对应的第一行数据没有被删除,WTF!!!这是什么鬼!然后我打开VueDevtools,然后刷新了一下,发现那个数组的第一项还是存在的removeOneAgentByIndex:function(index){this.agents.splice(index,1)…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

当函数执行到this.agents.splice()时,我设置了断点。发现传参index是0,但是页面上的列表项对应的第一行数据没有被删除,

WTF!!! 这是什么鬼!然后我打开Vue Devtools, 然后刷新了一下,发现那个数组的第一项还是存在的


removeOneAgentByIndex: function (index) {
  this.agents.splice(index, 1)
}

然后我就谷歌了一下,发现这个splice not working properly my object list VueJs, 大概意思是v-for的时候最好给列表项绑定:key=。然后我是试了这个方法,发现没啥作用。

最终我决定,单步调试,如果我发现该问题出在Vue自身,那我就该抛弃Vue, 学习React了

单步调试中出现一个异常的情况,removeOneAgentByIndex是被A函数调用的,A函数由websocket事件驱动。正常情况下应该触发一次的事件,服务端却发送了两次到客户端。由于事件重复,第一次执行A删除时,实际上removeOneAgentByIndex是执行成功了,但是重复的第二个事件到来时,A函数又往agents数组中添加了一项。导致看起来,removeOneAgentByIndex函数执行起来似乎没有设么作用。而且这两个重复的事件是在几乎是在同一时间发送到客户端,所以我几乎花了将近一个小时去解决这个bug。引起这个bug的原因是事件重复,所以我在前端代码中加入事件去重功能,最终解决这个问题。

我记得之前看过一篇文章,一个开发者调通过回调函数计费,回调函数是由事件触发,但是没想到有时候事件会重发,导致重复计费。后来这名开发者在自己的代码中加入事件去重的功能,最终解决了这个问题。

事后总结:我觉得我不该怀疑Vue这种库出现了问题,但是我又不禁去怀疑。

通过这个bug, 我也学到了第二方法,可以删除Vue数组中的某一项,参考下面代码。


// Only in 2.2.0+: Also works with Array + index.
removeOneAgentByIndex: function (index) {
  this.$delete(this.agents, index)
}

另外Vue devtools有时候并不会实时的观测到组件属性的变化,即使点了Refresh按钮。如果点了Refresh按钮还不行,那建议你重新打开谷歌浏览器的devtools面板。

最后for循环是非常建议对列表项绑定:key, 这个key应当是固定且唯一的,可以是uuid,或者id。但是千万不要绑定数组的index, 否则就会出现Vue项目中v-for数组删除第n项元素产生渲染错误


// very bad
<li v-for="(item,index) in list" :key="index"></li>


// very good
<li v-for="(item,index) in list" :key="item.id"></li>

原文地址:https://segmentfault.com/a/1190000017356114

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/193427.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Dreamweaver2021中文版 附安装教程

    Dreamweaver2021中文版 附安装教程当我们访问网站的时候看到的每一个页面都是前端程序员开发的,如果没有一款好的软件则会让开发效率大大降低,那么有没有一款高效的前端开发软件呢?推荐大家使用Dreamweaver2021,这是adobe旗下的一款非常受欢迎的网页设计软件,是该系列的全新版本,可以帮助广大学生、程序员制作出精美的网页,比如简洁的百度首页,复杂的淘宝页面,你都可以通过它让你游刃有余的制作出来。该软件可以帮助用户了解以及编辑HTML、CSS、Web、xml、json,各种前端语言都支持编码输入,还支持快捷键快速输入一大段代码,减少你重复

  • C语言之strstr函数

    C语言之strstr函数【FROMMSDN&&百科】原型:char*strstr(constchar*str1,constchar*str2);#include找出str2字符串在str1字符串中第一次出现的位置(不包括str2的串结束符)。返回该位置的指针,如找不到,返回空指针。Returnsapointertothefirstoccurrence

  • Java基础篇:泛型与类型擦除

    Java基础篇:泛型与类型擦除

  • Thread 的join方法解释

    Thread 的join方法解释  一、作用  Thread类中的join方法的主要作用就是同步,它可以使得线程之间的并行执行变为串行执行。具体看代码:  publicclassJoinTest{publicstaticvoidmain(String[]args)throwsInterruptedException{ThreadJoinTestt1=newTh…

  • java如何输入字符串_JAVA中怎样输入字符串「建议收藏」

    java如何输入字符串_JAVA中怎样输入字符串「建议收藏」https://zhidao.baidu.com/question/344967589.htmljava.lang.String.charAt()方法返回指定索引处的char值。http://www.yiibai.com/javalang/string_charat.html(toLowerCase)toUpperCase的意思是将所有的英文字符转换为大写字母,如:Stringcc=“a…

  • idea中查看接口的所有实现类_idea查看方法在哪里被调用

    idea中查看接口的所有实现类_idea查看方法在哪里被调用

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号